Css styling of extra menu i 2016 theme

I have made a new menu in the 2016 theme like here:https://premium.wpmudev.org/blog/add-menus-to-wordpress/
I have follow the tutorial and have som problems styling the menu class.
I have also read the comments, but I cant get the css styling to work.
I get the menu as a list and not as a vertical menu as I Want. When I use .new_menu_class in css it looks like the code dont update in the menu. Can it be that topnav or other styling overrides my .new_menu_class Css code?
Can anyone give my a tip on how to style:new_menu_class

  • Sajid

    Hi Bjorn,
    Hope you are doing good today :slight_smile:

    What CSS code you are using to style the menu items. Please post that code here so I can see if there is any mistake.

    Also share the link of your page here and screenshot (if possible) to explain how you want to style your menu items so I can take a look and give you code if needed.

    Also, make sure, while adding the code you don't have any missing or extra curly braces '{}' in the css code. If you have single one of them, then it will break the code that comes after that.

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:
    Cheers, Sajid

  • Bjorn

    code on page
    <?php wp_nav_menu( array( 'theme_location' => 'extra-piping', 'container_class' => 'my_extra_menu_class' ) ); ?>

    css code:
    .my_extra_menu_class {
    font-family: Montserrat, "Helvetica Neue", sans-serif;
    }

    .my_extra_menu_class ul {
    list-style: none;
    margin: 0;
    }

    .my_extra_menu_class li {
    border-top: 1px solid #d1d1d1;
    position: relative;
    }

    .my_extra_menu_class a {
    color: #1a1a1a;
    display: block;
    line-height: 1.3125;
    outline-offset: -1px;
    padding: 0.84375em 0;
    }

    .my_extra_menu_class a:hover,
    .my_extra_menu_class a:focus {
    color: #007acc;
    }

    .my_extra_menu_class .current-menu-item > a,
    .my_extra_menu_class .current-menu-ancestor > a {
    font-weight: 700;
    }

    .my_extra_menu_class ul ul {
    display: none;
    margin-left: 0.875em;
    }

  • Panos

    Hello Bjorn ,

    I just realized what you want to do :slight_smile:

    Could you please try out following CSS:

    .my_extra_menu_class {
    font-family: Montserrat, "Helvetica Neue", sans-serif;
    }
    
    .my_extra_menu_class ul {
    list-style: none;
    margin: 0;
    }
    
    .my_extra_menu_class ul > li.menu-item {
    border-top: 1px solid #d1d1d1;
    position: relative;
    display: inline-block;
    }
    
    .my_extra_menu_class a {
    color: #1a1a1a;
    display: block;
    line-height: 1.3125;
    outline-offset: -1px;
    padding: 0.84375em 0;
    }
    
    .my_extra_menu_class a:hover,
    .my_extra_menu_class a:focus {
    color: #007acc;
    }
    
    .my_extra_menu_class .current-menu-item > a,
    .my_extra_menu_class .current-menu-ancestor > a {
    font-weight: 700;
    }
    
    /*.my_extra_menu_class ul ul {
    display: none;
    margin-left: 0.875em;
    } */
    
    .my_extra_menu_class ul li ul{
      	background: rgba( 0,0,0,.02 );
    	position: absolute;
      	padding: 14px;
      	z-index: 200;
     	height: 0px;
      	opacity: 0;
      	-webkit-transition: all 300ms ease-in;
        -moz-transition: all 300ms ease-in;
        -o-transition: all 300ms ease-in;
        transition: all 300ms ease-in;
    }
    
    .my_extra_menu_class ul li:hover > ul{
    	height: auto;
      	opacity: 1;
    }

    You may notice I have also commented out a portion of your code as it didn't allow sub-menus.

    Hope this helps!

    Kind regards,
    Panos

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.