Change navbar color only after scroll

  • Resolved tereshka

    (@tereshka)


    6 years, 8 months ago

    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)

    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)

    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 6 years, 8 months ago by tereshka.
    AddWeb Solution

    (@addweb-solution-pvt-ltd)

    @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.

    Thread Starter tereshka

    (@tereshka)

    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 6 years, 8 months ago by tereshka.
    AddWeb Solution

    (@addweb-solution-pvt-ltd)

    @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;
}
    Thread Starter tereshka

    (@tereshka)

    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 6 years, 8 months ago by tereshka.
    • This reply was modified 6 years, 8 months ago by tereshka.
    AddWeb Solution

    (@addweb-solution-pvt-ltd)

    @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)

    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)

    @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)

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Change navbar color only after scroll’ is closed to new replies.