[Resolved] How do I isolate the rule for the sub-menu and the sub-menu of a sub-menu?

[Emily Condit]

My main menu is quite extensive and I need to make changes to the sub-menus and sub-menus of sub-menus (i.e. grandchild of the main menu) so there is distinct differentiation between the menu, sub-menus, and sub-sub-menus. I want to change the list styles as well as the colors of the grandchild menus separately from the main sub-menu. I have tried doing this with CSS but have not been able to isolate the rules that control the grandchild menus.

*UPDATE – I have isolated some rules to change the grandchild menu:
ul.sub-menu li.menu-item-has-children ul.sub-menu li
ul.sub-menu li.menu-item-has-children ul.sub-menu li a
ul.sub-menu li.menu-item-has-children ul.sub-menu li a:hover
ul.sub-menu li.menu-item-has-children ul.sub-menu li a:active

This may affect great-grandchildren as well. My menu doesn’t go that deep but now I can change the colors at least of the sub-sub-menus separately from the top sub-menu. I’m just listing this here in case anyone else runs into the same problem. I still cannot change the list styles for these menus however.*

I used the Firefox Element Inspector to try to figure out the rules for the list-styles. I think this one is causing the problem but I don’t know what style sheet it’s on and I don’t want to overwrite it for all menus. Still, my attempt to overwrite this rule has been unsuccessful:

.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: outside none none;
}

Also, I do have another question about the menu. Can I use a media query to change the styles of the grandchild menus so it only changes if the menu has been toggled into a button? If yes, what is the size I should use?

And, I don’t know what it would take to do this but is there any way to put a close menu link on the bottom as well as the top? So if someone is on my site using their phone and needs to close the menu for some reason, they don’t have to scroll all the way up to the top to close it?

I have the premium version, btw.

I LOVE this theme! Thanks so much!

[Tom]

Hi Emily,

Thanks for posting the information! Appreciate it 🙂

You may benefit by learning more about CSS selectors – they allow you to target elements on specific levels: https://css-tricks.com/child-and-sibling-selectors/

I’m not too sure I understand your media query question – can you possibly explain further.

As for adding a close menu link to the mobile menu – let me look into this a bit. It may be possible 🙂

Thanks!

[Emily Condit]

Hi, Tom.

Thank you for the link. I was wondering what those less than/greater than signs were I’ve been seeing in CSS lately. Things change so fast. It’s been a while since I’ve done a lot of CSS work. I am still unable to overwrite the list-type rule however.

I would like to put bullet points in the sub-menus of the main navigation and I can’t find the rule to overwrite it. The only one I found was the one affecting the sf-menu class (see original post) but even when I tried to overwrite it, it had no effect. I can’t get the bullet points to show up next to the list items in the sub menus. Any ideas?

So what I am asking about in the media query is this: I’ve used media queries in my CSS in the past to check to see what the screen size is and only use a rule if the screen size is below a certain size.

If the menu collapses, that happens at a certain screen size, right? So what I’m asking is what that size is so that I can only apply the extra rules to the sub-menus if the main menu is collapsed. At the desktop size, I like the menus being all the same color. But on a phone or tablet, my menu is very extensive so it’s just one big block and very difficult to differentiate between the top level menus and the sub-menus.

Does that make sense?

Thanks!
🙂 Emily

[Tom]

Hi Emily,

Give this CSS a try:

.sub-menu li {
  list-style-type: disc;
  list-style-position: inside;
}

It will show the bullet points in the sub-menu items.

Ah, the “magic number” for mobile is 768px.

So your media query would be:

@media (max-width: 768px) {

}

Let me know if you need more info 🙂

[Emily Condit]

Thank you for your help. The screen-size will help me out a lot.

Unfortunately, the rule you mentioned did not overwrite the list-style type. I still think this rule, which is a class applied to the ul which represents the main-navigation menu, is causing the problem:

.sf-menu, .sf-menu * {
margin: 0px;
padding: 0px;
list-style: outside none none;
}

It’s on a stylesheet called superfish.css. I could be wrong though. I have tried to overwrite this rule without success.

Thanks!
🙂 Emily

[Tom]

Can you possibly link me to your site so I can see if there’s any CSS overwriting what I gave you?

Thanks!

[Emily Condit]

Hi, Tom.

I did get around the issue by using the ::before rule on links in the sub menus but I would prefer not to do that. So you will see things that look like bullets but they are just special characters inserted before the list items.

The site is cafeemily.com. Still under construction.

Thanks,
🙂 Emily

[Tom]

That actually looks better than using regular bullet points – nothing wrong with doing it that way!

Great site 🙂

[Author]

Posts