Change menu aspect in sticky header

loppini
25 Posts
loppini posted this 11 December 2016

Is it possibile to change the aspect of the horizontal menu when the page is scrolled? The horizontal menu is in a sticky header, and I can change the aspect of the header when the page is scrolled, but I can find the way to change the aspect of the horizontal menu.
The effect that i want is this:

http://www.braccianositiweb.it/paint2 (try to scroll and you can see that the menu change the colors)

The site where I am working is this:

http://www.braccianositiweb.it/paint3

Thanks

Is it possibile to change the aspect of the horizontal menu when the page is scrolled? The horizontal menu is in a sticky header, and I can change the aspect of the header when the page is scrolled, but I can find the way to change the aspect of the horizontal menu. The effect that i want is this: http://www.braccianositiweb.it/paint2 (try to scroll and you can see that the menu change the colors) The site where I am working is this: http://www.braccianositiweb.it/paint3 Thanks
horizontal-menu sticky-header
Vote to pay developers attention to this features or issue.
11 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 13 December 2016

Hello Francesco,
I'm not quite sure that I see what you mean. Do you mean that you'd like to add a little move for the menu and image when the page scrolls and background of menu area is changed to white?

regards,
Aileen

Hello Francesco, I'm not quite sure that I see what you mean. Do you mean that you'd like to add a little move for the menu and image when the page scrolls and background of menu area is changed to white? regards, Aileen
loppini
25 Posts
loppini posted this 13 December 2016

No, I want to change the color of the text of the horizontal menù, from White to other colors

No, I want to change the color of the text of the horizontal menù, from White to other colors
Support Team
Support Team posted this 13 December 2016

Hi,

There is no such option in Themer, but you can use the following code:

.affix nav li span {
    color: #000000;
}

add it under the Home >> Settings >> Additional CSS.

Sincerely,
Hella

Hi, There is no such option in Themer, but you can use the following code: .affix nav li span { color: #000000; } add it under the Home >> Settings >> Additional CSS. Sincerely, Hella
loppini
25 Posts
loppini posted this 14 December 2016

It works!
Thank you so much!

It works! Thank you so much!
Support Team
Support Team posted this 14 December 2016

You are welcome. Feel free to contact us in any other occasion.

Sincerely,
Hella

You are welcome. Feel free to contact us in any other occasion. Sincerely, Hella
loppini
25 Posts
loppini posted this 31 October 2017

Hello, I used the code suggested (.affix nav li span { color: #000000;} and it works fine.
But there is a problem: this code change also the color of the submenus. How can I maintain the color of the submenus (without changes) in the sticky header?

Hello, I used the code suggested (.affix nav li span { color: #000000;} and it works fine. But there is a problem: this code change also the color of the submenus. How can I maintain the color of the submenus (without changes) in the sticky header?
Support Team
Support Team posted this 31 October 2017

Hi,

Try this one:

.affix nav > li span {
    color: #000000;
}

Sincerely,
Hella

Hi, Try this one: .affix nav > li span { color: #000000; } Sincerely, Hella
loppini
25 Posts
loppini posted this 05 November 2017

Hello,
Unfortunately seems doesn't work... with this the color of the text of the horizontal menù (first level) don't change when the page scrolls

Hello, Unfortunately seems doesn't work... with this the color of the text of the horizontal menù (first level) don't change when the page scrolls
Support Team
Support Team posted this 08 November 2017

Hi,

Please try something like this:
.affix nav[class*="bd-hmenu"] .nav > li[class*="bd-menuitem"] > a > span {
color: red;
}
This is more strong selector. It should affect parents only.
But it will override hover color. In addition to his you will need second declaration of hover state color.

.affix nav[class*="bd-hmenu"] .nav > li[class*="bd-menuitem"]:hover > a > span {
color: blue;
}

Thank you,
Olivia

Hi, Please try something like this: `.affix nav[class*="bd-hmenu"] .nav > li[class*="bd-menuitem"] > a > span { color: red; }` This is more strong selector. It should affect parents only. But it will override hover color. In addition to his you will need second declaration of hover state color. `.affix nav[class*="bd-hmenu"] .nav > li[class*="bd-menuitem"]:hover > a > span { color: blue; }` Thank you, Olivia
loppini
25 Posts
loppini posted this 17 November 2017

It works!
Great!

It works! Great!
Support Team
Support Team posted this 19 November 2017

You are welcome. Feel free to contact us in any other occasion.

Sincerely,
Hella

You are welcome. Feel free to contact us in any other occasion. Sincerely, Hella
You must log in or register to leave comments