[Support request] Background color of navgation submenu not working

Home Forums Support [Support request] Background color of navgation submenu not working

Home Forums Support Background color of navgation submenu not working

Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #2344341
    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

    #2344351
    Fernando
    Customer Support

    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

    #2344380
    Howard

    Hi Fernando,

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

    -H

    #2344392
    Fernando
    Customer Support

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

    #2344418
    Howard

    New credentials below (apologies):

    #2344466
    Fernando
    Customer Support

    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.

    #2344860
    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.

    #2345045
    David
    Staff
    Customer Support

    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;
    }
    #2345138
    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.

    #2345202
    Ying
    Staff
    Customer Support

    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.

    #2345211
    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…

    #2345239
    Ying
    Staff
    Customer Support

    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/

    #2346179
    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?

    #2346764
    Ying
    Staff
    Customer Support

    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.

    #2346872
    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?

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.