Archived topic
Mega menu styling
11 replies · Started by Mireille on January 17, 2019
My first mega menu tab has items and sub items which I styled. The remaining tabs have only items. I am trying to style the items in these tabs to match the sub items of the first tab but I can't take control separately.
I tried to add a class (one-level) to these items but that only allows me to control the background color. I want to control the fonts look.
I would appreciate a pointer to individual control the look of items within a tab. Thanks!
Hi there,
Any chance you can link us to the site in question?
You can edit the original topic and use the private URL field.
Let me know :)
Done. I am sure than one solution is to create a different mega menu and assign it to the tabs with only level of items but I am hoping that "simply" modifying is possible.
Sorry I'm a bit confused.
What exactly are you trying to style?
The font of "Women Of Aviation Worldwide Week (WOAW) is a global aviation awareness week for girls of all ages observed to mark the anniversary of the world’s first female pilot licence (March 8, 1910). The week is a call to address gender imbalance in the air and space industry.
It is not country or group specific."?
No. 'About' is styled properly. I'd like to control the font weight of the items under the other tabs (other than 'about'). You see the items and sub-items in the 'about' tab are 'uppercase and normal weight' and 'normal case and bold' respectively. I want to match the sub-item look (normal and bold) of the 'about' tab in the other tabs without changing the item look (uppercase and normal weight) in the 'about' tab. Right now, if I change the font weight of the first items in the tabs, they change everywhere including the first one ('about').
You'd have to give the menu items you want to customize differently a custom class then use CSS to target the class.
Should be the same methodology as this just with different CSS styles:
https://docs.generatepress.com/article/adding-buttons-navigation/
As I said, in the first post, I did try that. It does allow me to change background color of items but not font style.
I don't see why that would be the case.
Can you apply the method again so I can see why it isn't working?
I currently don't see custom classes or CSS added for those menu items.
Done. Connect >> Contact Us
You will see the green background but not the font weight change. I have tried various versions for the class (e.g. .one-level, .one-level ul li a, etc.) and it still does not change the weight of the font.
Take a look at the CSS selectors recommended in this article:
https://docs.generatepress.com/article/adding-buttons-navigation/
For you it should be: .main-navigation .main-nav ul ul li.one-level a
Thank you!
No problem :)
