diff --git a/app/views/shared/layout/partials/navigation/mobileheader/mobileheader.nunjucks b/app/views/shared/layout/partials/navigation/mobileheader/mobileheader.nunjucks
index c3363f9a89..856b108162 100644
--- a/app/views/shared/layout/partials/navigation/mobileheader/mobileheader.nunjucks
+++ b/app/views/shared/layout/partials/navigation/mobileheader/mobileheader.nunjucks
@@ -2,8 +2,10 @@
     <div>
         <div class="site-header__mobile-options clearfix">
             <div class="navbar-action">
-                <a href="#" class="action-icon gb-icon-logo site-header__menu-toggle">
-                    <span>Menu</span>
+                <a href="" class="action-icon site-header__menu-toggle">
+                    <span class="site-header__mobile__icon gb-icon-logo"></span>
+                    <span class="site-header__mobile__icon gb-icon-close"></span>
+                    <span class="site-header__mobile__text">Menu</span>
                 </a>
             </div>
 
@@ -15,8 +17,9 @@
                 </div>-->
 
                 <div class="navbar-action">
-                    <a href="#" class="action-icon gb-icon-search site-header__search-toggle">
-                        <span>Search</span>
+                    <a href="" class="action-icon site-header__search-toggle">
+                        <span class="site-header__mobile__icon gb-icon-search"></span>
+                        <span class="site-header__mobile__text">Search</span>
                     </a>
                 </div>
 
diff --git a/app/views/shared/layout/partials/navigation/mobileheader/mobileheader.styl b/app/views/shared/layout/partials/navigation/mobileheader/mobileheader.styl
index 5d01df62d9..e4257d3459 100644
--- a/app/views/shared/layout/partials/navigation/mobileheader/mobileheader.styl
+++ b/app/views/shared/layout/partials/navigation/mobileheader/mobileheader.styl
@@ -1,9 +1,13 @@
 .site-header {
     siteHeaderBar()
     a {
+        height ($navBar_height - $navBar_borderWidth)
         text-decoration none
         color inherit
         menuTextShadow()
+        display inline-block
+        width 4rem
+        relative()
     }
 
     .site-header__mobile-options {
@@ -14,11 +18,53 @@
             float right
             > div {
                 float right
+                height ($navBar_height - $navBar_borderWidth)
             }
         }
     }
+    .site-header__mobile__icon {
+        position absolute
+        font-size 28px
+        width 4rem
+        display block
+        text-align center
+        overflow hidden
+        top 6px
+        height 28px
+        line-height 28px
+    }
+    .site-header__mobile__text {
+        position absolute
+        bottom 4px
+        width 4rem
+        display block
+        text-align center
+    }
+    &__menu-toggle {
+        .gb-icon-close {
+            display none
+        }
+    }
 }
 
-.is-active.site-header__search-toggle:before, .site-header.is-active .site-header__menu-toggle:before {
-    content $icon-string-close_L
-}
\ No newline at end of file
+
+.is-active .site-header__menu-toggle {
+    .gb-icon-logo {
+        display none
+    }
+    .gb-icon-close {
+        display block
+    }
+}
+
+.site-header__search-toggle, .site-header__menu-toggle {
+    transition background-color 200ms ease
+}
+.is-active .site-header__menu-toggle, .site-header__menu-toggle:hover, .site-header__search-toggle:hover, .is-active.site-header__search-toggle {
+    background-color #85a26c
+}
+
+//.is-active.site-header__search-toggle:before, .site-header.is-active .site-header__menu-toggle:before {
+//    content $icon-string-close_L
+//}
+
diff --git a/app/views/shared/layout/partials/navigation/navigation.nunjucks b/app/views/shared/layout/partials/navigation/navigation.nunjucks
index 7d818c02e7..d21e3a05ca 100644
--- a/app/views/shared/layout/partials/navigation/navigation.nunjucks
+++ b/app/views/shared/layout/partials/navigation/navigation.nunjucks
@@ -17,12 +17,18 @@
 
             {% if not _meta.hideSearchAction %}
                 <li class="service-menu__search">
-                    <a href="" class="gb-icon-search" ng-click="nav.toggleSearch()"><span>Search</span></a>
+                    <a href="" ng-click="nav.toggleSearch()">
+                        <span class="service-menu__icon gb-icon-search"></span>
+                        <span class="service-menu__text">Search</span>
+                    </a>
                 </li>
             {% endif %}
 
             <li class="service-menu__feedback">
-                <a href="" class="gb-icon-comment" ng-click="nav.toggleFilter()"><span>Feedback</span></a>
+                <a href="" ng-click="nav.toggleFilter()">
+                    <span class="service-menu__icon gb-icon-comment"></span>
+                    <span class="service-menu__text">Feedback</span>
+                </a>
                 <span class="badge badge--error menu-notification">1</span>
             </li>
 
@@ -76,13 +82,18 @@
 
 
     <div class="main-menu">
-        <a href="/" class="gb-icon-home"><span>{$ __('menu.home') $}</span></a>
+        <a href="/" class="main-menu__home">
+            <span class="main-menu__icon gb-icon-home"></span>
+            <span class="main-menu__icon gb-icon-logo"></span>
+            <span class="main-menu__home__text">{$ __('menu.home') $}</span>
+        </a>
         <ul>
             {% for menuGroup in gb.menu %}
                 {% if menuGroup.type == 'normal' %}
                     <li class="main-menu__item is-category">
-                        <a href="" class="{$ menuGroup.icon $}">
-                            {$ __('menu.' + menuGroup.name) $}
+                        <a href="">
+                            <span class="main-menu__icon {$ menuGroup.icon $}"></span>
+                            <span class="main-menu__text">{$ __('menu.' + menuGroup.name) $}</span>
                         </a>
                         <ul>
                             {% for item in menuGroup.items %}
@@ -96,8 +107,9 @@
                 {% endif %}
                 {% if menuGroup.type == 'mega' %}
                     <li class="is-category is-mega">
-                        <a href="" class="{$ menuGroup.icon $}">
-                            {$ __('menu.' + menuGroup.name) $}
+                        <a href="">
+                            <span class="main-menu__icon {$ menuGroup.icon $}"></span>
+                            <span class="main-menu__text">{$ __('menu.' + menuGroup.name) $}</span>
                         </a>
                         <ul>
                             {% for category in menuGroup.items %}
diff --git a/app/views/shared/layout/partials/navigation/navigation.styl b/app/views/shared/layout/partials/navigation/navigation.styl
index 96c3fc0867..fbabbe07ec 100644
--- a/app/views/shared/layout/partials/navigation/navigation.styl
+++ b/app/views/shared/layout/partials/navigation/navigation.styl
@@ -148,9 +148,10 @@ siteHeaderBar() {
             > ul, > a {
                 float left
             }
-            > ul > li > a:before {
-                content ''
-                content unset
+            > ul > li > a {
+                .main-menu__icon {
+                    display none
+                }
             }
             > ul > li > a, > a {
                 white-space nowrap
@@ -159,19 +160,28 @@ siteHeaderBar() {
                 height ($navBar_height - $navBar_borderWidth)
                 padding 0 vrBlock(0.75)
             }
-            > a {
+            .main-menu__home {
                 width vrBlock(3)
                 position relative
-                span {
+                .main-menu__home__text {
                     position absolute
                     left -9999px
                 }
-                &:before {
-                    content $icon-string-logo
+                .main-menu__icon {
                     font-size vrBlock(2)
                     position absolute
-                    bottom vrBlock(0.5)
+                    line-height ($navBar_height - $navBar_borderWidth)
+                    text-align center
+                    &.gb-icon-home {
+                        display none
+                    }
                 }
+                //&:before {
+                //    content $icon-string-logo
+                //    font-size vrBlock(2)
+                //    position absolute
+                //    bottom vrBlock(0.5)
+                //}
             }
         }
     }
@@ -183,7 +193,15 @@ siteHeaderBar() {
         //set base colors
         background $navDrawer_background
         color $navDrawer_color
-
+        .main-menu__icon.gb-icon-logo {
+            display none
+        }
+        .main-menu__icon {
+            font-size vrBlock(1)
+            position absolute
+            left 10px
+            top vrBlock(0.5)
+        }
         //all list items should have the same padding
         li > a, .main-menu > a {
             display block
@@ -199,12 +217,12 @@ siteHeaderBar() {
             //items with icons need additional styling
             a {
                 position relative
-                &:before {
-                    font-size vrBlock(1)
-                    position absolute
-                    left 10px
-                    top vrBlock(0.5)
-                }
+                //&:before {
+                //    font-size vrBlock(1)
+                //    position absolute
+                //    left 10px
+                //    top vrBlock(0.5)
+                //}
 
                 //add an overlay instead of dark color since background changes
                 &:hover, &.is-active {
@@ -306,7 +324,7 @@ siteHeaderBar() {
 
 actionIcon() {
     display inline-block
-    padding vrBlock(1.5) vrBlock(1) vrBlock(0.25) vrBlock(1)
+    //padding vrBlock(1.5) vrBlock(1) vrBlock(0.25) vrBlock(1)
     relative()
     height vrBlock(2.75)
     font-size (100 /$majorThird) %
@@ -424,23 +442,39 @@ $service-menu_teaser_pos_r = vrBlock(0.5);
                 margin-right 1rem
             }
             > a {
-                > span {
+                height ($navBar_height - $navBar_borderWidth)
+                .service-menu__icon {
+                    position absolute
+                    font-size 28px
+                    width 4rem
+                    display block
+                    text-align center
+                    overflow hidden
+                    height ($navBar_height - $navBar_borderWidth)
+                    line-height ($navBar_height - $navBar_borderWidth)
+                }
+                .service-menu__text {
+                    position absolute
+                    bottom vrBlock(0.25)
+                    text-align center
+                    left 0
+                    width 4rem
                     display none
                 }
                 display inline-block
-                width 3rem
-                padding vrBlock(1.5) vrBlock(1) vrBlock(0.25) vrBlock(1)
+                width 4rem
+                //padding vrBlock(1.5) vrBlock(1) vrBlock(0.25) vrBlock(1)
                 relative()
                 font-size (100 /$majorThird) %
-                &:before {
-                    display block
-                    width 100%
-                    height vrBlock(2.75)
-                    text-align center
-                    absolute(top left)
-                    setType(2)
-                    line-height vrBlock(2.75)
-                }
+                //&:before {
+                //    display block
+                //    width 100%
+                //    height vrBlock(2.75)
+                //    text-align center
+                //    absolute(top left)
+                //    setType(2)
+                //    line-height vrBlock(2.75)
+                //}
             }
         }
     }