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: https://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

    except for one pesky view where the menu shoots over to the right:

    screenshot of problem on tablet

    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 8 years, 1 month ago by hopeburning.
    • This topic was modified 8 years, 1 month ago by hopeburning.
Viewing 4 replies - 1 through 4 (of 4 total)

  • 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

    (@hannahritner)

    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

    (@hopeburning)

    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

    Is there a way to make that happen without styling each menu item individually?

    • This reply was modified 8 years, 1 month ago by hopeburning.
    • This reply was modified 8 years, 1 month ago by hopeburning.
    hannah

    (@hannahritner)

    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.