Menu parent page with dropdown display and styling issues

Hi

I’m using Pro with various headers on this site: https://ifaa.designbythinkdev.co.za/

I have the following questions about the effects and styling for the one parent menu item ‘PROGRAMMES’:

  • The parent menu item is not active when I visit the sub pages – how can I change this?

  • Hover on the rest of the menu changes the font colour, but the menu item should only become bold when it is active. However, PROGRAMMES becomes bold on hover and active. This causes the entire menu to shift. How can I force PROGRAMMES to behave like the rest of the menu items?

Many thanks in advance for your help!

Hi @designbythink,

Thanks for reaching out.
I have checked your website and found that the PROGRAMMES menu item is always active while selecting the child menu item. And didn’t find any of the effects on hovering the PROGRAMMES menu.
I would suggest you please provide any screenshot marked with the issue or any video that helps us to recognize the problem.

Thanks

I have since managed to edit the hover effects myself.

To clarify – 3 things happen when a menu item is active. It changes colour, it becomes bold, and there is an underline.

PROGRAMMES is only black, bold, and underlined when you view that page:

However, when I visit any of the child pages, PROGRAMMES only has the colour change. It does not become bold or underlined. This makes it look like it is not active:

Hi @designbythink,

Would you mind sharing your credentials so that we can check your setup properly? To do that, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

Hi

I have added a secure note with login credentials to this post.

Many thanks!

Hello @designbythink,

Your Menu Parent Page item issue is caused by your custom CSS. You have added this in Cornerstone > Theme Options > CSS:

.m1uj-h.x-anchor:hover .x-anchor-text-primary, .m1uj-h.x-anchor[class*="active"] .x-anchor-text-primary, [data-x-effect-provider*="colors"]:hover .m1uj-h.x-anchor .x-anchor-text-primary {
	border-bottom: 3px solid #282828;
  margin-bottom: -3px;
  font-weight: 500 !important;
}

.m1ul-e.x-anchor:hover .x-anchor-text-primary, .m1ul-e.x-anchor[class*="active"] .x-anchor-text-primary, [data-x-effect-provider*="colors"]:hover .m1ul-e.x-anchor .x-anchor-text-primary {
	border-bottom: 3px solid #282828;
	margin-bottom: -3px;
}

.m1un-e.x-anchor:hover .x-anchor-text-primary, .m1un-e.x-anchor[class*="active"] .x-anchor-text-primary, [data-x-effect-provider*="colors"]:hover .m1un-e.x-anchor .x-anchor-text-primary {
  border-bottom: 3px solid #282828;
	margin-bottom: -3px;
}

.m1uk-e.x-anchor:hover .x-anchor-text-primary, .m1uk-e.x-anchor[class*="active"] .x-anchor-text-primary, [data-x-effect-provider*="colors"]:hover .m1uk-e.x-anchor .x-anchor-text-primary {
  border-bottom: 3px solid #282828;
	margin-bottom: -3px;
}

.m1uo-j.x-anchor:hover .x-anchor-text-primary, .m1uo-j.x-anchor[class*="active"] .x-anchor-text-primary, [data-x-effect-provider*="colors"]:hover .m1uo-j.x-anchor .x-anchor-text-primary {
  border-bottom: 3px solid #282828;
	margin-bottom: -3px;
}

.m1um-j.x-anchor:hover .x-anchor-text-primary, .m1um-j.x-anchor[class*="active"] .x-anchor-text-primary, [data-x-effect-provider*="colors"]:hover .m1um-j.x-anchor .x-anchor-text-primary {
  border-bottom: 3px solid #282828;
	margin-bottom: -3px;
}

Actually, you do not need to add any custom CSS to style your navigation menu parent. You can simply set a bottom order for the Top Links or in the Sublinks to be able to accomplish what you have in mind. Kindly check out the example pages I have created for you to demonstrate how it should be done without using any custom CSS.

See the secure note below.

Best Regards.

Thanks, this makes more sense!

Hi @designbythink,

Glad that we are able to help you.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.