Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
Hi Guys,
I'm having some difficulty trying to style the top level menu, the drop down (sub) menu and the mobile navigation tray independently? I've been tying to style menu, primary-menu, menu-item, sub-menu, etc but haven't been able to isolate the items mention above. Any advice will be much appreciated.
Thanks again
Offline
Hi Grover,
The controls are fully separate. Use the controls in the "Navigation, Header" to style the header navigation, and "Navigation, Trays" to style the sidebar/mobile navigation.
If you're trying to implement custom styling for one or the other, then use a container class to target the menu specifically, i.e. ".page__tray .menu ..." or "nav .menu" for the header.
Offline
Thanks. I'm trying to style the individual menu items (buttons) without effecting the sub menu items using .menu-item. What would be the CSS to target only the individual top level menu items? I'm currently using "nav .menu-item" which is working but obviously grabbing the sub-menus as well.
Offline
I sorted it out using the ">" child combinator selector as described here, https://css-tricks.com/child-and-sibling-selectors/
Offline
Glad you're sorted. In case you weren't already doing so, it's usually best practice to begin by looking at the generated stylesheet, to see exactly how items are being targeted in our CSS.
Offline
Pages: 1