Dynamic Navbar

[Enon11]

Hello,

Is it even possible to play with navbar of Kelo?

I want for example:
Before Scrolling: http://puu.sh/jlEs3/c1700bf8e2.png
After Scrolling down from the slider: http://puu.sh/jlEs3/c1700bf8e2.png

If you noticed, before scrolling the navbar text color and logo were different and after scrolling it was changed.

If it’s possible let me know the possible way to do it.

[Enon11]

Sorry, wrong screenshot. After Scrolling: http://puu.sh/jlEJR/f4afe02335.png

[sharmstr]

Try this css to change the font after scrolling.

COPY CODE

.navbar-transparent .navbar .kleo-main-header.header-scrolled {
    background-color: #fff !important;
}

.navbar-transparent.on-dark-bg .navbar .kleo-main-header.header-scrolled .navbar-nav>li>a, .navbar-transparent.on-dark-bg .navbar .kleo-main-header.header-scrolled .navbar-nav .caret:after {
    color: #000 !important;
}

No advice on changing the logo. I believe its been discussed here before. Do a search or use a logo that works for both backgrounds.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Enon11]

Hello,

It didn’t worked. Please check here: http://wiki.ultraseedbox.com/

[sharmstr]

How is it not working? Looks like it working to me.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Enon11]

Hello,

Nav before scroll: http://puu.sh/jo1sI/27bc7beebe.png
Nav after scroll: http://puu.sh/jo1CJ/250e7212de.png

Text color did not changed, It was black before and It’s black after scroll too. what I want to do is to change the text after scroll or before scroll means I want to change the color for one instance it can be before scroll or after.

[sharmstr]

Set the navbar color text to white then. The code I gave you is to change it after scroll 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Enon11]

I tried to make it work the same way you suggesting.

See this:

Before Scroll: http://i.imgur.com/1zjnunS.png
After Scroll: http://i.imgur.com/KyvtmM0.png

[Enon11]

Also, I tried that CSS in Quick CSS section and style.css section. Nothing worked.

[sharmstr]

Hmmm. Did you change the text color using theme options or custom css?

Respond privately with a link please.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Enon11]

This reply has been set as private.

[sharmstr]

Ahhh. Kleo can tell difference when you use light text or dark text. Its a new thing that I forgot about. Since changing it to white text it changes the css class from .on-dark-bg to .on-light.bg. So, try this instead for the second bit of code I gave you.

COPY CODE

.navbar-transparent.on-light-bg .navbar .kleo-main-header.header-scrolled .navbar-nav>li>a, .navbar-transparent.on-light-bg .navbar .kleo-main-header.header-scrolled .navbar-nav .caret:after {
    color: #000 !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Enon11]

Thanks Man, It worked.

[Author]

Posts