Dynamic Navbar

This topic has 12 replies, 2 voices, and was last updated 9 years by Enon11.

Author
August 1, 2015 at 22:28 #71154

Enon11
Participant

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.

August 1, 2015 at 22:30 #71155

Enon11
Participant

Sorry, wrong screenshot. After Scrolling: http://puu.sh/jlEJR/f4afe02335.png
August 2, 2015 at 13:58 #71195

sharmstr
Moderator
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
August 2, 2015 at 18:40 #71242

Enon11
Participant

Hello,

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

August 3, 2015 at 14:17 #71311

sharmstr
Moderator

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

August 3, 2015 at 21:42 #71393

Enon11
Participant

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.

August 3, 2015 at 21:45 #71394

sharmstr
Moderator

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

August 3, 2015 at 21:54 #71400

Enon11
Participant

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

August 3, 2015 at 21:57 #71401

Enon11
Participant

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

August 3, 2015 at 21:57 #71402

sharmstr
Moderator

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

August 3, 2015 at 22:00 #71404

Enon11
Participant

This reply has been set as private.
August 3, 2015 at 22:09 #71406

sharmstr
Moderator
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
August 3, 2015 at 22:15 #71407

Enon11
Participant

Thanks Man, It worked.
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

The forum ‘KLEO’ is closed to new topics and replies.

Search KB

Log in with your credentials

Forgot your details?