Site logo

Archived topic

GP Premium - Vary Nav Menu color acc to tree depth

3 replies · Started by george on January 19, 2021

Viewing posts 1–4 of 4

With GP premium I have the option to choose relevant colors for my main menu and then separately for my sub-menu. What happens if I have 2nd or 3rd level submenus? How can I set a different colour scheme for each different level? This is particularly troublesome for the mobile menu where my visitors can easily get confused as to which level submenu they are on.

If this not available through front end, please consider this as a feature request.

Thank you

Hi,

With GP premium I have the option to choose relevant colors for my main menu and then separately for my sub-menu. What happens if I have 2nd or 3rd level submenus? How can I set a different colour scheme for each different level? This is particularly troublesome for the mobile menu where my visitors can easily get confused as to which level submenu they are on.

You'll have to use custom CSS for the grandchild, great-grandchild and other ancestor sub-menus.

Example:

.main-navigation ul li ul li a{ ... } // child
.main-navigation ul li ul ul li a{ ... } // grand child
.main-navigation ul li ul ul ul li a{ ... } // great grand child

If this not available through front end, please consider this as a feature request.

We consider adding feature requests depending on its practicality and the number of people that have requestsed it. That said, We'll see what we can do about it. Thank you for bringing this to our attention. :)

Thanks for your reply. Two questions though:

1./ in your example what would go inside the {....} brackets? hex color code? Sorry to ask but css is not something I know.

2./ If you do consider this as a feature may I suggest following to make it more easy to implement. You could have a toggle for percentage brightness sub-menu color change for each level down you go on the sub-menu tree. So say your initial sub-menu color is black, each level down you go on the level tree there is a e.g 20% change in brightness or other attribute. Just an idea for you.

Thank you.

1./ in your example what would go inside the {….} brackets? hex color code? Sorry to ask but css is not something I know.

CSS properties like font-size, font-weight, background-color, etc.

So say for example you want to make the grandchild links to be bold and blue in color, you add something like this:

.main-navigation ul li ul ul li a{
font-weight: bold;
color: blue;
}

2./ If you do consider this as a feature may I suggest following to make it more easy to implement. You could have a toggle for percentage brightness sub-menu color change for each level down you go on the sub-menu tree. So say your initial sub-menu color is black, each level down you go on the level tree there is a e.g 20% change in brightness or other attribute. Just an idea for you.

We'll see what we can do about it. But for now, custom CSS is the way to go. :)

This archived topic is closed to new replies.