Change navbar color only after scroll

Resolved

(@tereshka)

Good day guys!

I changed my navbar colors by:

.page .navbar-custom {
    background: #FE4365 !important;
}
 .page nav.navbar.navbar-custom{ 
    background: #FE4365 !important;
}
.navbar-custom {
    background: #FE4365 !important;
}
nav.navbar.navbar-custom{ 
    background: #FE4365 !important;
}
body.home .navbar-transparent {
    background:transparent !important;
}

And it changed, that’s fine. But I want navbar stay transparent before scroll and only at scroll become pink. If it’s posibele, what did I miss in my code?

The page I need help with: [log in to see the link]

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

AddWeb Solution
(@addweb-solution-pvt-ltd)

7 years, 10 months ago
Hello tereshka,

Try below css code.
```
navbar.navbar-custom.navbar-fixed-top.navbar-color-on-scroll.navbar-transparent {
  background: #c6a5a54d !important; /** background:transparent !important; **/
}
```
Hope this will helps you.

Thanks.
Thread Starter tereshka
(@tereshka)

7 years, 10 months ago
I removed all my code and put the code below, and it’s transparent at first and then just black.
```
navbar.navbar-custom.navbar-fixed-top.navbar-color-on-scroll.navbar-transparent {
  background: #FE4365 !important; 
}
```
In ShopIsle doc was a post about changing color in header by this:
```
.navbar-custom {
  background: #FE4365 !important;
}
nav.navbar.navbar-custom{ 
	background: #FE4365 !important;
}
```
But it removes transparent at all((

I tried different mixes of your code and mine – nothing works as I wish((
- This reply was modified 7 years, 10 months ago by tereshka.
AddWeb Solution
(@addweb-solution-pvt-ltd)

7 years, 10 months ago
@tereshka try below css code instead of your code.
```
.navbar.navbar-custom.navbar-fixed-top.navbar-color-on-scroll.navbar-transparent {
  background: transparent !important;
}

.navbar.navbar-custom.navbar-fixed-top.navbar-color-on-scroll.navbar-scroll-point.navbar-not-transparent,
.page .navbar-custom {
  background: #FE4365 !important;
}
```
Hope this will helps you.
- This reply was modified 7 years, 10 months ago by AddWeb Solution.
Thread Starter tereshka
(@tereshka)

7 years, 10 months ago
Thank you, it almost works right. There is a small black flash right before a pink color.
You can see it if you scroll down slowly one time.
And on mobile version it’s black instead of transparent.

I left the code on the site for checking.

Any ideas?
- This reply was modified 7 years, 10 months ago by tereshka.
AddWeb Solution
(@addweb-solution-pvt-ltd)

7 years, 10 months ago
@tereshka I edited above css code, please try and let me know it works or not. I did not change mobile menu color to transparent because after trans-parenting background color menu can’t see clearly.

If you really want to change color of mobile menu, try below css code.
```
.navbar-fixed-top .navbar-collapse {
 background: rgba(0, 0, 0, 0.24) !important;
}
```
- This reply was modified 7 years, 10 months ago by AddWeb Solution.
Thread Starter tereshka
(@tereshka)

7 years, 10 months ago
Two pages (posts and shop’s catalog) has black menu.

And I don’t understand, why this colorful menu jumps so harshly? There was a single image before using Companion Plugin and menu changed it’s color very smoothly and beautifully.
- This reply was modified 7 years, 10 months ago by tereshka.
- This reply was modified 7 years, 10 months ago by tereshka.
AddWeb Solution
(@addweb-solution-pvt-ltd)

7 years, 10 months ago
@tereshka try below css code.
```
.navbar.navbar-custom.navbar-fixed-top.navbar-color-on-scroll.navbar-transparent,
.navbar.navbar-custom.navbar-fixed-top {
  background: transparent !important;
}

.navbar.navbar-custom.navbar-fixed-top.navbar-color-on-scroll.navbar-scroll-point.navbar-not-transparent,
.page .navbar-custom,
.navbar.navbar-custom.navbar-fixed-top.navbar-scroll-point{
  background: #FE4365 !important;
}
```
Thread Starter tereshka
(@tereshka)

7 years, 10 months ago

Now it’s transparent everywhere, nice effect, but I hope to get transparent menu only on the front page.
AddWeb Solution
(@addweb-solution-pvt-ltd)

7 years, 10 months ago
@tereshka try below css code.
```
.navbar.navbar-custom.navbar-fixed-top.navbar-color-on-scroll.navbar-scroll-point.navbar-not-transparent,
.page .navbar-custom,
.navbar.navbar-custom.navbar-fixed-top,
.navbar.navbar-custom.navbar-fixed-top.navbar-color-on-scroll.navbar-transparent
.navbar.navbar-custom.navbar-fixed-top.navbar-scroll-point{
  background: #FE4365 !important;
}

.home .navbar.navbar-custom.navbar-fixed-top.navbar-color-on-scroll.navbar-transparent,
.home .navbar.navbar-custom.navbar-fixed-top {
  background: transparent !important;
}
```
Thread Starter tereshka
(@tereshka)

7 years, 10 months ago

Thank you very much! This is what I needed. Sorry for bothering)