Changing style of additional nav bar

  • Hey there.

    I wanted to add a second navigation menu directly under the main menu bar on my site. I figured out how to do that, but I cannot figure out how to change the style of it for the life of me. Can someone be my hero?

    To add my menu, I added the code below to the functions.php:

    function register_my_menu() {
  register_nav_menu('new-menu',__( 'New Menu' ));
}
add_action( 'init', 'register_my_menu' );

    To make the second menu show up in the right location (under the existing nav menu bar), I put the following code into static-nav.php

    <?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>

    So once my new menu was showing up, I needed to change its style (I want it to have a smaller and lighter font than the main one). THIS IS WHERE I AM GETTING LOST.

    I tried to modify the appearance of the second menu by adding the code below to style.css, but it has not changed anything about the second menu. I realize the code below doesn’t change the font size or color, but regardless the code doesn’t change the appearance of the second menu at all even if I change the text-align value to right or left or change the padding to 50px. I am missing something.

    I am clearly doing something wrong because I am so new at this, but I can’t for the life of me figure out what it is.

    .new-menu ul { text-align: center; list-style-type: none;}
    .new-menu ul li {display: inline-block; padding: 0 5px;}

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

  • Hi Scun,

    Please share the link of the website, it might be helpful to give you exact code.

    You could try this:

    ul.new-menu { text-align: center; list-style-type: none;}
.new-menu > ul > li {display: inline-block; padding: 0 5px;}
    Thread Starter Test

    (@scun10)

    Thanks so much for responding. I tried putting the code you provided into style.css and it did not produce any change.

    The site hasn’t launched yet and I’ve been building it in construction-mode, but I’ll make it visible so you can take a look: tomakefriends.com.

    Please try the following code:

    ul#menu-second-line-of-menu li {font-weight: 200;font-style: normal;font-size: 10px;line-height: 20px;}

Or
#menu-second-line-of-menu ul > li {font-weight: 200;font-style: normal;font-size: 10px;line-height: 20px;}

    If it works, then you can bring about more changes via css

    Thread Starter Test

    (@scun10)

    Okay, it’s still not working, but I did figure out one thing based on what you suggested this last time. And thank you once again.

    First I tried it as is, but with your last bits of code. No difference.

    One thing I noticed that may not matter: When I set up the second menu in the customizer, I had used the name second line of menu (rather than new-menu like I had used in the code). Just to make it consistent, I changed that one to new-menu now too so they match.

    Does it matter where I put the code in the css?

    yes it does,

    try using a plugin like custom css

    and give priority to certain css by adding !important to it. eg.

    ul#menu-second-line-of-menu li {font-weight: 200;font-style: normal;font-size: 10px !important; line-height: 20px !important; color: blue !important;}

    Thread Starter Test

    (@scun10)

    I just downloaded the custom css plugin and tried this most recent line, as well as the previous ones, and am still not seeing any change.

    This is the Buzz Blog theme in case that has any relevance.

    I don’t expect you to work on this all night with me, I so appreciate your patience. I was so happy when I got the second line of menu to show up correctly…I was sure it would be so simple to modify the text.

    Never be sure, ay? ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing style of additional nav bar’ is closed to new replies.