[Support request] Disappearing secondary menu in mobile

[Rafał]

When I’m scrolling on a mobile device, the second menu disappears (dark blue). I click expand category and when I try to go down my menu disappears. On the PC menu works fine.

[Fernando]

Hi Rafal,

To clarify, do you want the Secondary menu to be sticky as well?

On Desktop view, from my end, it doesn’t appear to be sticky.

[Rafał]

When trying to go lower the open menu, the second menu disappears and I have to open it again. I don’t want it to be sticky at the top, but not to disappear.

[Fernando]

I see. I’m not experiencing that from my end. I also tested on my personal phone, and I can’t experience the issue there as well. What specific device are you using?

[Rafał]

I checked it on three devices and on each of them the second menu disappears when scrolling too fast (2x Xiaomi and Samsung).
Maybe there is a way to display this menu similarly to the canvas?

[Fernando]

I see. You would need a third-party plugin to create another off-canvas menu other than the Primary menu.

Does the issue still occur if you try deactivating all of your non-GP plugins? It would be good to back up your site before testing this.

If you would like to use a plugin for this, you can probably try one of these: https://bashooka.com/cms/off-canvas-navigation-menu-wordpress-plugins/

[Rafał]

I used one of the plugins from the link, however I can’t get the button to match the mobile menu. Is there a way to insert a plugin shortcut instead of the standard menu?

[Fernando]

Hi Rafal,

Can you rephrase this part “Is there a way to insert a plugin shortcut instead of the standard menu”?

Are you referring to replacing the default menu with that of a plugin?

[Rafał]

Yes

[Fernando]

I see. Can you try to disable the menus in GP through a Layout Element and enable to menu from your plugin?

Reference: https://docs.generatepress.com/article/layout-element-overview/#disable-element

Let us know if this works.

[Rafał]

Unfortunately it doesn’t work. I want to remove the mobile menu icon from the header, but without removing the entire header. Maybe there is a way to move off canvas in place of the second navigation?

Is it possible to display a different second menu on mobile than on desctop?

[David]

Hi there,

can you provide a screenshot of what you want to achieve?

[Rafał]

I found a way to solve the situation by using the standard off-canvas menu. I need help editing the appearance of the off-screen menu.
I’m interested in setting the top and bottom borders, as well as slightly shifting the submenu text and subsequent children, as it looks in the attached photo. In addition, I would like to add 3 icons in one line with the “X” button – phone number, email and location.

[Fernando]

Hi Rafal,

Here’s a CSS you can try adding for the Top and Bottom spacing:

aside#iksm-widget-8 {
    margin-top:0px;
    margin-bottom:0px;
}

Here’s one to shift the sub-menu items:

.iksm-term.iksm-term--child a.iksm-term__link {
    padding-left: 20px;
}

You can alter the values to your preference.

Lastly, to add new icons, you can create a Block Element – Hook. Hook it to inside_slideout_navigation. Use GB Button Blocks for the Icons: https://docs.generateblocks.com/article/buttons-overview/

We’ll check afterward if and how we can align it to the X button.

[Author]

Posts