[Resolved] Dropdown navigation color and borders, border around all pages

[Kris]

Hi Tom and Crew,

Just need a little CSS help.

Navigation:
My client wants a white background with black text on the main primary navigation.
The submenus need to be flipped to black background and white text.
Submenu items need a white boarder around each.

Pages – They would like to have a border around all pages so Header, Content with border, Footer.

Thanks much,
Kris

[Kris]

Sorry never mind on the colors of the menu. Of course that was just a setting in customize.

I just need the border stuff.

Also, I found the CSS below to remove the down arrows on the navigation. But this does not then show the dropdowns on hover or click.

.main-navigation ul ul.sub-menu,
.menu-item-has-children .dropdown-menu-toggle{
display: none;
}
.main-navigation .main-nav ul li.menu-item-has-children > a {
padding-right: 15px;
}

[Leo]

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 🙂

[Kris]

Hi Leo,

I put the link in the original topic. It is a temporary link as I am working on Local By Flywheel. This is a clone of what I am working on so do whatever is needed and thanks much.

I also used some CSS from the forum to add two lined main menu items.

Cheers,
Kris

[Tom]

Seems your link expired – sorry about that!

This article might help for adding a border around the entire site: https://docs.generatepress.com/article/adding-a-container-wrapper/

Let me know 🙂

[Kris]

Hi Tom, just sent you a new one… if not tonight I will resend on Monday. Enjoy your weekend!

[Tom]

Missed it again! Did the instructions I linked to help with the full site border?

[Kris]

No worries. I posted a new one. I will leave this one up all day today. I have not tried your link yet but will this morning. This link has the CSS to remove the down arrows and allow the top menu items to add a </br> for two lines. When I combined those I no longer get the drop downs.

Edit: Tom, your info on adding a site wrapper did the trick. Instead of including the header and footer, I just changed those to after-header and before-footer. Thanks much!

Edit2: I just renewed the link so it should be good for another 8 hours.

Thanks much, Kris.

[Tom]

This custom CSS you added is making it so the sub-menus don’t appear:

.main-navigation ul ul.sub-menu, .menu-item-has-children .dropdown-menu-toggle {
    display: none;
}

If you remove that, they should appear on hover.

[Kris]

Hi Tom, thanks I have them back but would like to remove the down arrows.
Thanks, Kris

[Tom]

I would do this:

@media (min-width: 769px) {
    .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
}

The arrows are necessary on mobile so users can tap them to open the sub-menu.

[Kris]

As always awesome support. Thank you.

Kris

[Tom]

No problem 🙂

[Author]

Posts