[Support request] Background color of navgation submenu not working

[Howard]

I’m trying to create a header for my entire site: a single row, with a logo, a navigation menu and two buttons, from left to right (using three columns, within a container).

I have done this as a Block Element, and set the Element type to Site Header.

I have also made a Layout Element which disables Top Bar, Primary Navigation, Secondary Navigation, Featured Image, and Content Title, and applied it to every page.

Three of my four nav menu items have submenus. I can set the text and background colors without problem for the main text and background, and for the submenu text, by editing the color settings in the Navigation block – this works as expected.

However, any changes I make to the BACKGROUND color for Submenu and Overlay has NO EFFECT – there is no color there AT ALL. I can see the submenu text, but it just appears over the section that underlies it.

What am I missing? I can’t find any other place to change the colors of menus and submenus in a Block Element to be used as a header.

Thanks in advance…

-HS

[Fernando]

Hi HS,

Can you share the link to the site in question?

You may use the Private Information field for this: https://docs.generatepress.com/?s=private+information

[Howard]

Hi Fernando,

I will give you a link and credentials in the private information field.

-H

[Fernando]

I tried logging in, however, it says the password is incorrect. Can you check?

[Howard]

New credentials below (apologies):

[Fernando]

Can you try clearing all caching mechanism set in your site?

The menus have classes for Elementor and CSS from Elementor even though Elementor is disabled.

[Howard]

Can you tell me the names of the classes? The Elementor implementation definitely had some custom CSS, but finding where it was injected might be tricky. The names would help, especially if it’s my own CSS.

[David]

Hi there.

looks like the Navigation block has some bugs, i notice if you set the OVERLAY MENU to OFF then the sub menu background color works. But with any other option it does not. There CSS is rather janky, using inheritenace rules and !important. That needs some proper bug testing.

All i can suggest is try this CSS:

.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {
    background-color: #f00;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Howard]

David,

The CSS you provided does add a background color to the dropdowns, though this solution gives me little comfort.

Further, I can’t see any way to control color for the details: the hover state of the text and background on the pulldowns themselves, borders between rows etc., and a long dropdown list seems to just stretch past the bottom of the screen, with no way to scroll the submenu.

I feel like I’m missing something here. Is there no way to create a fully styled header, including navigation, as a GP Element? What I’m trying to do is not at all unusual, but I’m not seeing where the controls are to fully style the navigation block, and the failure to scroll is a deal-breaker. If other controls exist, but not where I expect to see them (the nav block editor), then where are they?

Apologies for noob questions, but I’m coming from Elementor, and the culture shift is not intuitive.

[Ying]

Hi Howard,

The navigation block is a WP core block over which we don’t have any control, unfortunately.

I’m trying to create a header for my entire site: a single row, with a logo, a navigation menu and two buttons, from left to right

If this is what you’re looking for, I would not suggest using the block element – site header, the default GP theme header should be enough and we can guide you through this.

Let me know what you think.

[Howard]

I would be happy to use the default theme header, but I need to add two buttons to the right side of it, and I need to have different menus on several pages.

If you can suggest how I could go about that, I’d be happy to try. I suspect I might be able to use a Buttons Block or Hook Elements to add buttons to the header, but if there’s another way, I’d like to know it.

More importantly, I do need to have slightly different menus on certain pages, and I don’t yet see a way to do that using the theme header. I prefer to differentiate the poges using page categories (which I already have working), so I could apply the right header for each category. Is this possible?

Thanks…

[Ying]

but I need to add two buttons to the right side of it

That’s easy, you can use a block element - hook, add 2 buttons in the element, choose menu_bar_items as the hook name.
https://docs.generatepress.com/article/block-element-hook/

I need to have different menus on several pages.

You can use one of the below plugins to add conditions to your menus.
https://en-ca.wordpress.org/plugins/if-menu/
https://en-ca.wordpress.org/plugins/conditional-menus/

[Howard]

OK, I can use your suggestions, but I need a menu that accommodates submenus, and will scroll appropriately when a submenu is long enough to reach below the bottom of the viewport. It would also be great if it allowed fine control over the appearance of the submenus (borders, etc.).

An example would be here: https://www.tunelings.com – under the Details menu item, choose “How to Make TuneLings”, to see what I mean. How can I get this functionality in GP Pro?

[Ying]

How can I get this functionality in GP Pro?

It’s the default menu of GP theme.

Let me know if there’s any difficulty to build such menu in GP.

If you use a navigation block, that’s a WP core block, it’s not something that GP can control.

[Howard]

OK, Now I’m confused. Is there a different block to use for a menu within the header?

I only see one block: Navigation, which is a Core block. I have all the GP Pro Modules enabled, except for WooCommerce.

What other block can I use for a menu?

[Author]

Posts