Jump to content

Why are the mega menu headers, staying CAPS?


Recommended Posts

I've been doing work on this website recently.  I've set the main menu to be CAPS, but for some reason I cannot override the Mega Menu titles to be Capitalized.

They have their own Class "menutitle", but even with that set as "Important", and nothing that appears to be loading after, I cannot see the cause.


I'd appreciate anyone spotting the cause to this.  Thank you.

Click/Hover on Services to see the menu.


Link to comment
Share on other sites

I see one "text-transform: uppercase !important" and another "capitalize" (not !important). So obviously the !important one will override.
Throwing !important on the second won't fix it because all you've done is make them of equal specificity, so the one defined later wins.

Seems like you've got a lot of duplicate rules and a lot of !importants in there. Both of those are indications of problems with the CSS. Look through what you've got, cut out as much as you can without severely breaking everything, and try giving it all another shot.

Link to comment
Share on other sites

This has nothing to do with .menutitle.

Are you familiar with your browser's developer tools? If not then you really need to spend some time learning about them.

Open your developer tools, find the menu, and consider applying the mHover class manually to force it open. Then navigate (in the tool) to the heading's A or SPAN and look at what CSS rules are being applied. I see three rules whose selectors all have a > chain that targets the link. Two of those have text-transforms.

Link to comment
Share on other sites

#grve-main-menu .grve-wrapper > ul > li > a, #grve-main-menu .grve-wrapper > ul > li.megamenu > ul > li > a, #grve-theme-wrapper #grve-hidden-menu ul.grve-menu > li > a, .grve-toggle-hiddenarea .grve-label, #grve-hidden-menu ul.grve-menu > li.megamenu > ul > li > a, #grve-main-menu .grve-wrapper > ul > li ul li.grve-goback a, #grve-hidden-menu ul.grve-menu > li ul li.grve-goback a {
    font-size: 14px!important;
    text-transform: uppercase!important;
    letter-spacing: 1.0px!important;

I see this at the top, which his what sets the font for the main  menu itself.

I've stripped out the 'megamenu' part which I think is causing it to override that, and then add that separately, but it seems to have no effect.  What I think you are saying, is that if one class has the UPPERCASE assigned to it, and another class it added to it later, using a different !important method, it is ignored.

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.