[Resolved] 2px black separator lines between menu items and sub-menu items

[Robert Holland]

Folks: I find that CSS custom menu modification is theme specific, but I cannot find any instructions for GeneratePress on menu and sub-menu modification such as hover-color, current-page-color, etc. and especially for menu-item separators.

Are sub-menus the same as dropdown menus off the main menu?

FYI — our website need not be complex, only easy to navigate. And, I am dismayed that GeneratePress has no template theme for authors. So, I chug away from scratch.

http://www.AuthorRobertHolland.com
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Now then, I found a code snippet for black separator lines between the top menu (main menu) items, but I have been unable to modify this for the same results on the dropdown menu.

.main-navigation .menu > li > a {
border-right: 2px solid #000000;
}

I have tried well over 20 CSS snippets from everywhere on the web to do the same for the dropdown menu, because it is extensive, but need not be be complex. The sub-menu is simply a list of Vicki’s illustrations with excerpts from the novel, which we eventually hope to sell as posters on Zazzle.com.

Is there a menu widget for GeneratePress?

Can you help me with this?

Thanks…

[Ying]

Hi Robert,

Let’s handle a couple of questions at a time.

Are sub-menus the same as dropdown menus off the main menu?

Yes.

but I cannot find any instructions for GeneratePress on menu and sub-menu modification such as hover-color, current-page-color, etc

You can set colors at customizer > colors > primary navigation. Parent items are the main menu items, sub menu items are the dropdown menu items.

Can you tell us what are you trying to achieve exactly? We can help with the CSS.

[Robert Holland]

Ying, the code snippet below creates black separator lines between primary navigation items. I have been unable to modify this CSS for the same results on the sub-menu.

To be clear, I want black separator lines between the sub-menu items. Why is this so hard? I have spent 20-30 hours searching for a solution and my search includes all of GeneratePress Support pages.

.main-navigation .menu > li > a {
border-right: 2px solid #000000;
}

[Elvin]

Hi Robert,

Try this CSS:

.main-navigation .menu ul.sub-menu li:not(:last-child) {
    border-bottom: 2px solid #000000;
}

This adds a black bottom separator to sub-menu items except the last one. 😀

[Robert Holland]

Elvin, I am not running the site with caching yet, but I’ve had that problem in the past. I use the WP Super Cache plugin. And I like the proverb. 🙂

Thanks, your code, did the trick.

[Elvin]

Nice one. Glad you got it sorted. No problem. 😀

[Author]

Posts