[Resolved] Main nav and sub nav

Home Forums Support Main nav and sub nav

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #319083
    sjoerd89

    I am styling my navigation of the website and i am getting close to where i want it to be. A few issues i am having right now:

    1. I only want my main navigation to have the bottom right corner rounded. But with my css it also does this for the subnavigation items.

    Zilvertron mechanics & electronics – Uw partner in de kleine aandrijftechniek

    2. I would love the sub items to be as wide as the top navigation items. And have the same height they look a lot higher at the moment.

    3. Somehow the subnavigation with children lines up different then the ones without. (also can be seen in above picture)

    Current CSS i have for this navigation:

    .site-header {
        display: none;
    }
    
    .main-navigation .sticky-logo {
        position: absolute;
        left: 0;
        top: 0;
        height: 65px;
    }
    
    .main-navigation .sticky-logo img {
        height: 60px;
    	padding-top: 15px;
    }
    
    .main-navigation .main-nav ul ul li  {
    	width: 200px;
    }
    
    .main-navigation .main-nav ul li.menu-item-has-children>a, .secondary-navigation .main-nav ul li.menu-item-has-children>a {
        background-color: #14377d;
    	padding-right: 10px;
    	padding-left: 10px;
    	border-right: solid #2d71ba;
    	border-bottom-right-radius: 15px 15px;
    }
    
    .main-navigation ul li a {
        background-color: #14377d;
    	padding-right: 10px;
    	padding-left:10px;
    	border-right: solid #2d71ba;
    	border-bottom-right-radius: 15px 15px;
    }
    GeneratePress 1.3.46
    GP Premium 1.2.96
    #319152
    sjoerd89

    Btw site = http://www.sjoerdjonker.nl pass is sjoerdjuh

    #319165
    Tom
    Lead Developer
    Lead Developer

    1. Replace your corner rounding CSS with this:

    .main-navigation .main-nav > ul > li.menu-item-has-children>a, 
    .secondary-navigation .main-nav > ul > li.menu-item-has-children>a {
        background-color: #14377d;
        padding-right: 10px;
        padding-left: 10px;
        border-right: solid #2d71ba;
        border-bottom-right-radius: 15px 15px;
    }
    
    .main-navigation .main-nav > ul > li > a {
        background-color: #14377d;
        padding-right: 10px;
        padding-left:10px;
        border-right: solid #2d71ba;
        border-bottom-right-radius: 15px 15px;
    }

    2. Try this:

    .main-navigation ul ul {
        width: 100%;
    }

    3. You adjusted the padding of your menu items in the block of CSS above dealing with rounded corners.

    #319626
    sjoerd89

    Man i wish i had your CSS knowdledge,
    thanks a lot!

    #319633
    Tom
    Lead Developer
    Lead Developer
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.