Change Navigation bar color

  • Hi,

    You guys have always been amazing with helping out on the forum. I was wondering if its possible to change the color of the main navigational bar, without changing the header background color. Would I need to put in a full-width image in the header container that has the color strip under the navigation?

    I’m just a little lost on how to do it and I’m looking forward from hearing from you!

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

  • Hi Jeremy,

    Would you mind posting the link to your site in question? So that we can offer you with a possible solution.

    Thanks!

    Thread Starter jeremyinetusa

    (@jeremyinetusa)

    No problem!

    https://sleek.yourprobatewebsite.com/

    Hi,

    Sorry to jump into your thread but I thought I’d give it a try!

    Example of red background

    How I’ve done what I’ve done in the above image is in google chrome right click the menu – inspect. Hover over the text until the whole menu bar is highlighted

    Once you’ve found the line you need click on it and on the right you’ll see a styles box. in this case you need the box starting with “.regular-nav.nav__menu” see here I then added the text background-color: red You should then see the menu turn red.
    However this is only for you to see, no one else can see this.

    To make it so others can see it you have to add the CSS into your theme
    To do this copy the whole Stlye text:

    .regular-nav.nav__menu {
    margin: 0 -12.5px;
    background-color: #ff0c0c;
    }

    go to customise on your website – advanced options – Additional CSS – paste in. It should look like this
    The /* Menu background colour test */ is just a title so that you know that code is for that. You should see your theme change.

    To understand it more look at these videos

    Sorry if this isnt what you wanted but trying to give back since I’ve received help here

    Hi Jeremy,

    You can try adding the following code to your Admin Panel > Appearance > Customize > Advanced Options > Additional CSS field:

    .primary-nav__container {
  background: red;
}

    Thanks!

    Thread Starter jeremyinetusa

    (@jeremyinetusa)

    After playing around with the inspector and trying what was posted here, I noticed my problem is that I was trying to make this full-width, and that the wrapper container for the navigation does not go full width, but the Header wrapper does. Unfortunately I couldn’t figure out how to specify the color of the wrapper and the nav-container to work both at its standard placement and the sticky scroll of the menu at full screen width.

    I think to be able to do this I would need to make a new container for the header or look in the CSS codex that might force full-width (like 100%).

    However you both helped me figure out how to change the nav-bar within the margin. Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change Navigation bar color’ is closed to new replies.