Title: Navigation Button Changes
Last modified: August 21, 2016

---

# Navigation Button Changes

 *  Resolved [lf designs](https://wordpress.org/support/users/lf-designs/)
 * (@lf-designs)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/navigation-button-changes/)
 * Dear all,
 * I’ve made a few changes to the main navigation button which appears when the 
   width is reduced.
 * This is what I’ve done so far by taking code from here and there in this forum
   and the snippets.
 *     ```
       /* add "menu" text to navigation button */
       .btn-navbar {
       	width: 90px;
       	height: 30px;
       	vertical-align: top;
       }
       .btn-navbar:after {
       content: "Menu";
       font-family:    Giro-Light;
       font-size:      1.5em;
       font-weight: 	normal;
       font-style: 	normal;
       margin: 0px 0px 0px 25px;
       }
   
       /* menu button changes */
       .navbar .btn-navbar {
           background-color: #009999;
           background-image: none;
           background-repeat: repeat-x;
           border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
           box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075);
           box-shadow: none;
           color: white;
           float: right;
           margin-left: 5px;
           margin-right: 5px;
           padding: 7px 10px;
           text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
       }
       .navbar .btn-navbar:hover,
       .navbar .btn-navbar:focus,
       .navbar .btn-navbar:active,
       .navbar .btn-navbar.active,
       .navbar .btn-navbar.disabled,
       .navbar .btn-navbar[disabled] {
         color: white;
         background-color: #006666;
         *background-color: #006666;
       }
       ```
   
 * Here is the [site](http://www.jabutitheatre.com).
 * The problem is with the added “menu” text.
 *     ```
       /* add "menu" text to navigation button */
       .btn-navbar {
       	width: 90px;
       	height: 30px;
       	vertical-align: top;
       }
       .btn-navbar:after {
       content: "Menu";
       font-family:    Giro-Light;
       font-size:      1.5em;
       font-weight: 	normal;
       font-style: 	normal;
       margin: 0px 0px 0px 25px;
       }
       ```
   
 * It’s misaligned and I can’t seem to change anything changing the margin values,(
   except the forth). Is something wrong with the syntax?
 * I suppose my whole stylesheet must be a grammatical disgrace for you guys though!
 * thanks for your help,
 * daniel

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/navigation-button-changes/#post-4410030)
 * You missed a bit of code:
 *     ```
       .btn-navbar:after {
         content: "Menu";
         display: inline;
         float: right;
         font-family: Giro-Light;
         font-size: 1.5em;
         font-style: normal;
         font-weight: normal;
         margin: -14px 0 0 25px;
       }
       ```
   
 * The float:right and -14px have been added…
 *  Thread Starter [lf designs](https://wordpress.org/support/users/lf-designs/)
 * (@lf-designs)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/navigation-button-changes/#post-4410076)
 * Thank you very much,
 * I had to adjust a couple of things to centre it but it looks fine now I think.
   Just that it doesn’t have the shadows the lines have so I’m trying to put them
   in like this:
 *     ```
       .btn-navbar:after {
         content: "Menu";
         display: inline;
         float: right;
         font-family: Giro-Light;
         font-size: 1.5em;
         font-style: normal;
         font-weight: normal;
         margin: -12px -5px 0px 0px;
         text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
       }
       ```
   
 * But it doesn’t seem to work.
 * I’ll mark it as resolved but maybe you could point me in the right direction 
   to shadow the “menu” text as well. Thanks
 * daniel
 *  [rdellconsulting](https://wordpress.org/support/users/rdellconsulting/)
 * (@rdellconsulting)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/navigation-button-changes/#post-4410178)
 * I think you were close:
 * `text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);`
 *  Thread Starter [lf designs](https://wordpress.org/support/users/lf-designs/)
 * (@lf-designs)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/navigation-button-changes/#post-4410182)
 * Thank you very much! A little adjusting and worked fine!
 * Thanks!
 * daniel

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Navigation Button Changes’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [lf designs](https://wordpress.org/support/users/lf-designs/)
 * Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/navigation-button-changes/#post-4410182)
 * Status: resolved