How to edit navbar drop down menu color, font, and alignment

[Torah541]

Hi,

I would like to edit the color of the drop down menu background and have the font match the navbar font and size. I would also like the navbar dropdown to match the width of the navbar link.

[Torah541]

[prakash_s]

Hello @Torah541,

Thanks for writing to us.

It seems that you are using the Pro theme default header, Please there is no option to change the dropdown width, background color, and font size for the sub menu but you can achieve it by using the custom CSS code. You need to add these custom CSS codes to the Global CSS box.

Drop-down menu width and background color.

.desktop .sub-menu {
min-width: 200px;
background-color: #121212;
}

Submenu font, font size, and color.

.desktop .sub-menu a {
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-style: normal;
font-weight: 400;
color: #bbb;
}

Submenu item text hover color.

.x-navbar .desktop .sub-menu a:hover{
color: rgb(54,100,104);
}

Submenu item background color on hover.

.desktop .sub-menu a:hover {
background-color: #00000093;
}

Or since you are a Pro theme user you can create a custom header where you can use the Navigation inline element. You can customize all the styling for the menu through the Header builder. In case you have not seen the Header builder doc please have a look at it.

Header Builder | Themeco Docs

Please note you need to assign the header layout as well. Please have a look at this doc to learn more about how to assign the Header layout

Conditions and Assignments | Themeco Docs

Please feel free to change the color code, font, font size, and width as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[Torah541]

Thanks. I new Pro had header feature I couldn’t find it for the life of me. I set up the header, but I am having trouble figuring out how to have my primary menu which I already set up to display. Please advise. TIA!

This shows some the menu items I previously set up

This shows the current header default menu being displayed.

[marc_a]

Hey @Torah541,

If you are wondering where to find to create the custom header, just go to Cornerstone page then hit the plus icon and you will see the header option.

On the other hand, if you are using the default header, please make sure that you have assigned the primary in your menus so that it will show up on the frontend.

Hope that helps.

[Torah541]

If you see from my images above, I created a cornerstone header to replace the default header . How do I get the menu links from the default header to “copy” over to the cornerstone header?

[ruenel]

Hello @Torah541,

When you insert a Navigation Inline element in your custom header, you can assign which menu would display.

I would recommend that you check out these tutorial videos to get familiar with the header builder.

The tutorial video uses an older version of the builder. It may look different if you are using the latest version, but still, the process of creating the header is the same.

Best Regards.

[Torah541]

Super! Thanks
Last question on this topic- the navigation inline element is aligned to the right, how would I be able to center it between the empty space to the right of the logo?

[ruenel]

Hi @Torah541,

"How would I be able to center it between the empty space to the right of the logo?"
Ans: You can enable the Flexbox option of your Container and center it.

For more information about the Flexbox, you can check this out:

Best Regards.

[Torah541]

Thanks for the tip. I appreaciate all your help!
I tried centering the menu with the flexbox but then it centered the logo as well.
This was especially terrible on mobile view it move the toggle and the logo to the center.
How would I center the links and keep the logo all the way to the left?

[ruenel]

Hey @Torah541,

Please provide us access to your site so we can check your custom header element settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[ruenel]

Hello @Torah541,

You have set a maximum width for the Bar element of 1200 pixels. It can only stay on the leftmost part of the 1200-pixel wide Bar element.

You will have to set the alignment of the Bar to Space Between.

And then set the minimum width to 1040 pixel which comes from 1200 - 155 pixels. The 155 is from the width of the logo image.

The result would be like this:

Best Regards.