Mega Menu – Uppercase and Lowercase

[tonisaneca]

Hi there,

I’d like to make my main menu buttons uppercase, but still retain the mixed case in the sub menus. I’m having trouble pinpointing exactly which code in the css I should tweak, and I’d appreciate it if you could point me in the right direction. Thank you so much!

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

nav .menu ul.sub-menu li.menu-item > a, nav .menu ul.sub-menu li > span, nav.std-menu ul.sub-menu {
    text-transform: capitalize !important;
}

Thanks
Mohammad

[tonisaneca]

Thanks for that, Mohammad! One more thing, I’d like to use Font A for my main menu font, Font B for the Sub Menu heading, and Font C for the Sub Menu Buttons. If you could tell me which specific css I should add my font styles to, that’d be great. Thank you!

[Kyle – SUPPORT]

Hi

Have you set the 3 fonts in the font options?

– Kyle

[tonisaneca]

Hi Kyle!

Yup, but I’d like to apply those font styles only to the mega menu and not to the rest of the h1-h6 elements on the page. The font options also only has 1 font choice for the menu.

[Kyle – SUPPORT]

Add this to your custom css:

li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > a, li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > span.title {
  font-family: fontname;
}
li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > a, li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > ul.sub-menu .sf-std-menu {
  font-family: fontname;
}

– Kyle

[tonisaneca]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

If I understood correctly you sorted your problem and shared your solution?
Thanks

-Rui

[tonisaneca]

Hi Rui,

Actually, the problem remains. I just included the custom CSS I had in case it helps any of your Support team with helping me out 🙂

[tonisaneca]

Edit: It works! The changes just took a while to reflect. Thanks! 🙂
Edit 2: It only works when I use a Google font. How do I use reference a font I uploaded?
Is it just the same as the regular CSS?

Example:

font-family: 'ProximaNova-Reg', sans-serif;

[Kyle – SUPPORT]

The custom css you seem to have is

li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > a, li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > ul.sub-menu .sf-std-menu {
  font-family: 'Georgia', serif;
}

– Kyle

[Kyle – SUPPORT]

Ok no problem 🙂

[tonisaneca]

Hi again,

The code works, but only when I use Google fonts. Do you have any idea why my Proxima Nova font (which I installed in the Font Options) code isn’t working? 🙁

[Kyle – SUPPORT]

It would need to be loaded as one of your fonts, for e.g. h3, so that it is being loaded on the page

– Kyle

[tonisaneca]

Hi Kyle,

Thing is, I already loaded it as a custom font but it isn’t reflecting on the page. Is it not already loaded on the page?
Again, this code works fine when I choose a Google font for my mega menu fonts but not when I use the custom fonts I uploaded.

#main-navigation li {text-transform: uppercase;}

nav .menu ul.sub-menu li.menu-item > a, nav .menu ul.sub-menu li > span, nav.std-menu ul.sub-menu {
text-transform: capitalize !important;
}

li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > a, li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > span.title {
    font-family: 'ProximaNova-Reg', Helvetica, sans-serif;
    letter-spacing: 1px;
    font-weight: 700;
    font-style: normal;
    font-size: 13px;
    text-transform: uppercase !important;;
}
li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > a, li.menu-item.sf-mega-menu > ul.sub-menu > li.menu-item > ul.sub-menu .sf-std-menu {
  font-family: 'avenirnextregular', serif;
}

Attachments:

You must be logged in to view attached files.