Mega Menu – Uppercase and Lowercase

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 19 replies, 4 voices, and was last updated 9 years by Kyle – SUPPORT.

Viewing 15 posts - 1 through 15 (of 20 total)

1 2 →

Back to forum

Posted in: Atelier
September 13, 2015 at 3:18 pm #212534

tonisaneca
Member

Post count: 53

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!

September 14, 2015 at 8:02 am #212576
Mohammad – SUPPORT
Moderator

Post count: 27441
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
September 15, 2015 at 1:24 pm #213151

tonisaneca
Member

Post count: 53

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!

September 15, 2015 at 1:56 pm #213164

Kyle – SUPPORT
Moderator

Post count: 35880

Hi

Have you set the 3 fonts in the font options?

– Kyle

September 15, 2015 at 2:06 pm #213168

tonisaneca
Member

Post count: 53

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.

September 15, 2015 at 2:10 pm #213170
Kyle – SUPPORT
Moderator

Post count: 35880
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
September 15, 2015 at 2:27 pm #213174

tonisaneca
Member

Post count: 53

This reply has been marked as private.

September 15, 2015 at 2:40 pm #213179

Rui Guerreiro – SUPPORT
Keymaster

Post count: 25779

Hi,

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

-Rui

September 15, 2015 at 3:04 pm #213189

tonisaneca
Member

Post count: 53

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 🙂

September 15, 2015 at 3:30 pm #213202

tonisaneca
Member

Post count: 53

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;

September 15, 2015 at 3:31 pm #213203
Kyle – SUPPORT
Moderator

Post count: 35880
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
September 15, 2015 at 3:32 pm #213204

Kyle – SUPPORT
Moderator

Post count: 35880

Ok no problem 🙂

September 15, 2015 at 3:52 pm #213212

tonisaneca
Member

Post count: 53

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? 🙁

September 15, 2015 at 3:57 pm #213215

Kyle – SUPPORT
Moderator

Post count: 35880

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

September 16, 2015 at 5:32 am #213373
tonisaneca
Member

Post count: 53
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.
Back to forum

Posted in: Atelier