Menu Indicator

Morning, Is there a feature that allows you to have a line or an indicator what page you are on, on the menu?
synergyprotection.ca

Thank you.

Hi again,

what kind of a line or indicator menu that you want? currently there is no option for it in this theme but maybe I can help you using css code.

Thanks Awan! if possible a thin red line that matched the theme (row heading titles) of the site.

Hi,

here is the code to make an underline of the current menu:

.current-menu-item {
    border-bottom: 1px solid #910101;
}

Thank you, Awan that is perfect!!

Quick question… the line does not appear when I am in a submenu page

Eg.
Top Menu - About Synergy (custom link - set to #)
Sub - What Drives Us - Page
Sub - Synergy Difference - Page

Any fix for that?

Sure, sorry I missed about that. Change the previous code with this:

.current-menu-item, .current-menu-ancestor {
    border-bottom: 1px solid #910101;
}
1 Like

Hi Awan,

That is perfect, thanks for the support!

Hello.

Similar to the request by Paul - but instead of having a rule line under the navigation item selected, is it possible to have the navigation item (text) stay the same hover color when you go to that section. My hover color is red.

My website: http://creativew.com/theme

Thanks,
Esteban

Yes I’d like to know about any different types of Menu selection indicators that anyone can tell us.

Hello there, to change the menu text color when its hovered, you can use the css code below:

#mainnav ul li a:hover {
    color: white;
}

Regards,
Awan

Hi,

First of all, thank you for all your amazing support and this extremely nice theme!!

Could you please help me with the following: I would like that, once clicked/selected, a menu item stays a certain color, say white.

While the last css suggestion from Awan changes menu items’ color to white when hovered, it doesn’t maintain the color of selected menu item to white (when/after a menu item is clicked on).

Looking forward to your advice!

Hi Gabi,

You can try this CSS code:

.current-menu-item a, .current-menu-ancestor a {
    color: red !important;
}

Regards,
Awan

Awan, thank you so much for your help, your suggestion worked flawlessly and my day started perfectly because of you!

But as a result of this, I would need to do 2 other changes and would really appreciate it if you could help me:

  1. changing the color of menu items (item text) on mobile devices;
  2. adding a hover color to the menu items (item text hover, not item background hover) on mobile devices-desktop version already has a built-in menu item hover.

Biggest thank you in advance!

Hello Awan,

You had a busy week, I’m sure of this.

But your help is much needed. Could you please offer some suggestions for the 2 items above?

Thank you in advance!

Hi,

I am sorry for the delay. Please try this CSS code:

@media only screen and (max-width: 767px){
  #mainnav-mobi ul > li > a {
    color: white;
  }

  #mainnav-mobi ul > li > a:hover {
    color: red;
  }
}

Btw, I am not sure for why you need hover effect on mobile screen because I think you’ll need to click the menu and hold for a second to see the hover effect.

Regards,
Awan

Thanks a lot, Awan! All code worked great.

Actually, the hover effect on mobile works exactly as on desktop, no need to hold and wait, and I thought it might help with navigation.

Thank you once more!

All the best to you :slight_smile:

Hi guys,

Trying to get bold fonts on active menu but no success so far.
I followed the above instructions and used this as custom CSS

.current-menu-item {
	font-weight: 700;
}

but I can’t see any difference.

Any ideas?

Hi,

Please try this instead:

.current-menu-item a {
    font-weight: 700 !important;
}

Regards,
Awan

Works fine, many thanks!

What can I do for submenues should not be highlighted?