Customizing Original Header Template

[rocketboy]

Under theme options I couldn’t find a way to change the bottom spacing on the navigation. I was able to change the spacing on the top of the menu via the text field option. Is there any custom CSS you would recommend to add to eliminate so much space on the bottom of the menu?

I also need to change the color of the menu background and noticed this wasn’t an option (just the text). Is there any CSS code you can recommend to add to be able to control the colors for the desktop and mobile menu? I see the NAVBAR background color option in the ETHOS theme options but it controls the header color that I’m trying to keep different.

I understand its more controllable with the pro header but I just need these few changes and didn’t want to have to recreate a the header.

Thank you for your assistance

[ruenel]

Hello @RocketBoy,

Thanks for writing in!

If you want to change the color of the navbar different from your logobar or header color, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar,
.desktop .sub-menu {
    background-color: black;
    border-color: black;
}

I am just not sure where to find the space below the navbar because the last time I checked your site I am only seeing this:

I have applied the css above to illustrate how it would look like. Feel free to change the color to match your site.

[rocketboy]

Thats perfect with the navigation background color changes. Thank very much for the info.

In regard to the bottom space change in the navigation, please see my screenshot. I see an option only to control the top spacing of the navigation from the theme options. Is there any CSS that can be added to control the bottom spacing?

Thank You for Your Help!

[ruenel]

Hello @Rocketboy,

The setting you are looking for is the X > Theme Options > Headers > Navbar > Navbar Top Height. Please reduce it to at least 40 pixels, and adjust the X > Theme Options > Headers > Navbar > Links - Text > Navbar Top Link Alignment to position the menu item at the middle of the navbar. You may need to change the font size as well only if necessary.

Hope this helps.

[rocketboy]

I’m able to change the spacing on the top of the bar. I’m not able to change the spacing on the bottom of the bar. I was trying to reduce the amount of spacing on the bottom of the navbar. It doesn’t look like theres any options to do this under theme options. Can CSS be applied here to reduce the spacing?

Thank You

[ruenel]

Hello @Rocketboy,

Are you trying to reduce this space?

Please reduce your Navbar top height to 40 pixels and you’ll have this:

If this is not what you mean, could you please clarify further?

Thanks.

[rocketboy]

That is what I mean, I apologize for the confusion. I didn’t understand what you meant. Thank you for helping me with this, I really appreciate it!

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!