Change color of nav-bar when scrolling?

[Kramer534]

Hi

I can't seem to change the color of the Navigation bar, when i start scrolling.
When i enter my website the navbar will be transparant, but when i start scrolling down it becomes black, how do i change this, so that the navbar will stay transparant?

Hope some body can help!

[Queso]

Hello! It sounds like you may need a change made to the code of the theme to accomplish that, which wouldn't be something I can help with directly. That said, I do definitely recommend having the documentation here open while doing any theme work, and always be sure to back things up frequently.

[bobafett]

are you sure you want to do that?  If you made your nav bar transparent your text images will show trough when scrolling.  That may look very ugly.

[Kramer534]

Yeah, or at least make i white instead. It looks really ugly that it's black, because the website is mostly white.

[TTF1]

So what is the answer to this question?  I want (need) to change that bar to white since my logo is comprised of darker colors and cannot be seen on the black bar.  I've looked through all of the code, and I cannot find any place to make those changes.  My theme is the Paris theme.  I've changed the button color, the footer color, and just about everything else...except that nav bar!  Your help is appreciated.

[danielpeter]

Hi @TTF. I don't know if you ever resolved this issue.  If not, here is a solution. If so, I'll still comment here for other user's benefit:

In order to change the color of the nav bar you need to do a couple of things:

1. Inspect the navbar using your browser (Safari has the best inspector but Chrome's is also passable).

You'll see the DIV CLASS for the nav bar highlighted when you hover over the code in the inspector. Look for the Paris header CSS ID.  Weebly is not exactly standardized in how they handle this but hopefully it is something like ".paris-header"

I'm on the Birdseye theme so I can only speak to the CSS for that so here is how that is handled:

2. Change the color right in the inspector then copy the CSS from the inspector for the header area. It will look something like this:

.birdseye-header, body.splash-page.affix .birdseye-header {
top: 0px !important;
background: rgba(1, 124, 177, 0.952941) !important;
padding: 10px 30px;
}

3. Head over to your Settings in Weebly and open the SEO tab. Paste the CSS into the Header Code area. Make sure to first include the <style> tag and then close it with </style>. Also, you must use the "!important" tag as you see above in order for the color you choose to override the theme's color.

The reason I suggest this method over altering the CSS file in the theme itself is that, although it results in better site performance if you do that, it will make your site unsupportable by Weebly.  So add the CSS to your SEO header and that will keep Weebly support happy.

[Howardtw]

Hi @danielpeter it works on the theme-"Urban Dine - Birdseye 2" when I added the code in SEO Sittings > HEADER CODE but it doesn't work on the theme-"Nectur - PurpleHaze". Is any other way I can change the menu bar's color to #550088 with the theme-"Nectur - PurpleHaze", please. 

wrong color on theme-"Nectur - PurpleHaze" http://chukwebsite.weebly.com/

the color I want on  the theme-"Urban Dine - Birdseye 2" http://testchuk.weebly.com/

Thank you.
Howard

[localpathcomp]

Your on scroll class is #header.minimal

#header.minimal {
    background: #550088;
}

Change the hex code color to what you would like and apply the code in the site-wide header. If the other stylesheets get loaded last you will need to apply !important or load the CSS in an actuall stylesheet file.

[matpaddo]

Hey.

I know this question was posted two years ago but if anyone's still looking for how to change the background of the scrolling nav-bar when using the Nectur theme, this worked for me.

1. Go to the theme tab.

2. From the colour palettes at the top left, pick cream.

3. Click 'Edit HTML/CSS' at the bottom left.

4. In the menu on the left-hand-side, click on variables_cream.less

5. Change the "@main" value to be the hex colour you wish to use for the background. I wanted white so mine read:

"@main: #ffffff;"

Hope that helps someone in some way.

Cheers
Mat

[Adam7]

Thanks for sharing that, @matpaddo!

[SRYM]

Hello, quick question. How were you able to go from transparent to blue or purple on your title bar? Thank you for your time.

[elgrigo]

This code did not work for me. I think I have found another solution. It is in the style files of the site under the heading Nav subheading Fixed. The property is stuck. So the CSS code would be:

<style>

.stuck {

background: #b4b4b4 !important; /* for grey color, you can change color accordingly */

}

</style>

This worked very well for me. You can put it either in SEO header of the whole site or at the header of any particular page. You can also put it in the main.css at the editor without <style>.

I hope it helped because I have searched for many hours without finding anything about it in the web.