Full Color Nav Bar

Illdy
1

Does anyone know how to make a site’s nav bar a full, solid color rather than having it transparent and show up on top of the header image?

2

Hey there

I hope you are doing well today :slight_smile:

Your question and image is not related to each other? question is about navigation bar and the question is on about us section, please clarify and provide ink to your website url, :slight_smile:

Regards Noda

3

Yes, so sorry about that! Essentially, I uploaded a photo to the Jumbotron section (and its set to fit to screen). However, there is a large white space above the image. The image’s width is exactly how I want it, so I’m not sure how to get rid of the white space. (image 1)

Also, I have the sticky function turned on for the navigation bar, but I want the page titles to be displayed on a solid color bar, rather than on the Jumbotron image. So, I want it to look like it does when I am scrolling halfway down the page when using the sticky function. I’ve included an example. (image 2 and image 3)

4

Hi there

Hope you are having a good day and thank you for your question :slight_smile: In order to check your question i need to see your live website, please provide url and i will take a look

5

Absolutely. It’s hannahraecreativeco.com

6

Hi there

Hope you are having a good day and thank you for your question :slight_smile:
Looks like checking several things in the backend is necessary, please send me your access credentials along with your website URL and I will investigate this case. Don’t forget to mark your reply as private!

Thanks!
Colorlib Support Team

7

No problem. Thank you SO much.

hannahraecc
Goldfish23!

8

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the header bar color by going to Appearance > Customize > Additional CSS and pasting it there.


/*Change header menu color*/
#header .top-header {
    background-color: red;
}

As it stands for the white space, the jumbotron background image appears to have a short height so it may be better to try replacing the image with one that has a larger height to remove the white space

Let us know how this works for you.

Best Regards,
Support