Title: Secondary Menu Styling
Last modified: January 4, 2017

---

# Secondary Menu Styling

 *  [hopeburning](https://wordpress.org/support/users/hopeburning/)
 * (@hopeburning)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/secondary-menu-styling/)
 * Hi there! I’ve got three issues to resolve, two to do with the secondary menu(
   which is my only menu), and another with the sidebar. Here is my test site: [http://quinn-test.stephaniebastek.com/](http://quinn-test.stephaniebastek.com/)
 * ON DESKTOP:
    I’d like for the individual menu (li) items to be evenly spaced.
   Right now I’ve styled them using:
 * #nav-second ul.sf-menu>li {
    width: 25%; padding-top: 2%; }
 * But I’d love if I could make the white space between each list item equal instead.(
   Right now, there’s more space between “ABOUT” and “STORIES” than “THE MIGHTY 
   BLOG” and “GET IN TOUCH”). Is there an easy fix for this that isn’t styling each
   menu item individually?
 * ON MOBILE/TABLET:
 * I cannot for the life of me figure out how to get the menu to mimic its appearance
   on the desktop view. I’d like the menu to be the width of the white body, and
   stay stuck to it no matter whether in mobile or tablet view, but cannot make 
   it so! It seems to be working for the most part (though it’s not wide enough):
 * ![working okay on this setting minus the width](https://i0.wp.com/quinn-test.
   stephaniebastek.com/wp-content/uploads/2017/01/Screen-Shot-2017-01-04-at-3.05.14-
   PM.png)
 * except for one pesky view where the menu shoots over to the right:
 * ![screenshot of problem on tablet](https://i0.wp.com/quinn-test.stephaniebastek.
   com/wp-content/uploads/2017/01/Screen-Shot-2017-01-04-at-3.02.03-PM.png)
 * Here is my tangle of code, some of which I am sure is unnecessary…
 * /*MOBILE NAVIGATION*/
    #mobile-nav-trigger, .nav-trigger { width: 100%; background:#
   55395f; border-top-left-radius: 15px; border-top-right-radius: 15px; -moz-border-
   top-left-radius: 15px; -moz-border-top-right-radius: 15px; -khtml-border-top-
   left-radius: 15px; -khtml-border-top-right-radius: 15px; -webkit-border-top-left-
   radius: 15px; -webkit-border-top-right-radius: 15px; }
 * .kad-menu-name {
    background: #55395f; border-radius: 15px !important; -moz-border-
   radius: 15px !important; -khtml-border-radius: 15px !important; -webkit-border-
   radius: 15px !important; }
 * .kad-nav-inner.mobileclass {
    background: #55395f; width: 100%; }
 * button.nav-trigger-case {
    width: 90%; position: relative; top: 5%; bottom: 5%;
   padding: 5%; left: 50%; }
 * SIDEBAR:
 * Is there a way to trigger the left border on the sidebar to disappear in tablet
   or mobile views, when it is shifted to the bottom of the page?
 * Thanks for any help you can offer!
    -  This topic was modified 9 years, 6 months ago by [hopeburning](https://wordpress.org/support/users/hopeburning/).
    -  This topic was modified 9 years, 6 months ago by [hopeburning](https://wordpress.org/support/users/hopeburning/).

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

 *  [Wallbreaker](https://wordpress.org/support/users/wallbreaker/)
 * (@wallbreaker)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/secondary-menu-styling/#post-8619365)
 * Hello,
    Hope burning. Try these few lines of css in your custom files. THey should
   provide minor changes to the menu. I am just voloteer here and not theme developer
   but hope it will assist you in styling:
 *     ```
       .kad-mobile-nav .kad-nav-inner li {border-bottom:1px solid white}
       .nav-trigger-case {left:0%!important;width:100%!important}
       #mobile-nav-trigger, .nav-trigger{width:100%!important;}
       ```
   
 * Regards,
    Wallbreaker
 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/secondary-menu-styling/#post-8620526)
 * 1. Looks like this is already working as you want?
 * 2. Try adding this to your custom css box in Theme Options > Advanced Settings:
 *     ```
       @media (max-width: 992px) {
       .headerclass .container {
           padding: 0;
       }
       .mobileclass {
           background: #55395f;
       }
       button.nav-trigger-case {
           width: 100%;
           position: static;
       }
       #mobile-nav-trigger, .nav-trigger {
           width: 100%;
       }
       }
       ```
   
 * 3. In your custom css change this:
 *     ```
       .sidebar {
           border-left: 2px solid #b3cccc;
           padding-left: 10px;
       }
       ```
   
 * to this:
 *     ```
       @media (min-width: 992px) {
       .sidebar {
           border-left: 2px solid #b3cccc;
           padding-left: 10px;
       }
       }
       ```
   
 * Hope that’s helpful!
 * Hannah
 *  Thread Starter [hopeburning](https://wordpress.org/support/users/hopeburning/)
 * (@hopeburning)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/secondary-menu-styling/#post-8626206)
 * Thanks, you guys! That worked perfectly. The menu is now at 100% width in mobile/
   tablet view, and the sidebar is gone. But the desktop menu isn’t quite how I’d
   like it styled. In the image below (from the desktop view), what I’m trying to
   accomplish is to get the spacing between menu items (represented by the yellow
   boxes) to be the same size.
 * ![menu spacing](https://i0.wp.com/quinn-test.stephaniebastek.com/wp-content/uploads/
   2017/01/menu-spacing.png)
 * Is there a way to make that happen without styling each menu item individually?
    -  This reply was modified 9 years, 6 months ago by [hopeburning](https://wordpress.org/support/users/hopeburning/).
    -  This reply was modified 9 years, 6 months ago by [hopeburning](https://wordpress.org/support/users/hopeburning/).
 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/secondary-menu-styling/#post-8627142)
 * This might get you a little closer:
 *     ```
       li.menu-about.menu-item-17 {
           width: 20% !important;
       }
       li.menu-stories.menu-item-16 {
           width: 20% !important;
       }
       li.menu-the-mighty-blog.menu-item-15 {
           width: 30% !important;
       }
       li.menu-get-in-touch.menu-item-14 {
           width: 30% !important;
       }
       ```
   
 * Feel free to play around with those percentages.
    Hope that helps!
 * Hannah

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

The topic ‘Secondary Menu Styling’ is closed to new replies.

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

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)
 * [navigation](https://wordpress.org/support/topic-tag/navigation/)
 * [styling](https://wordpress.org/support/topic-tag/styling/)

 * 4 replies
 * 3 participants
 * Last reply from: [hannah](https://wordpress.org/support/users/hannahritner/)
 * Last activity: [9 years, 6 months ago](https://wordpress.org/support/topic/secondary-menu-styling/#post-8627142)
 * Status: not resolved