Site logo

Archived topic

Hook element using 'menu_bar_items' to show on mobile

9 replies · Started by Brenden on September 10, 2021

Viewing posts 1–10 of 10

I added a button block to the navigation using the 'menu_bar_items' hook. It looks great on desktop, but I need the button to show up on mobile as well (below the other menu items). What is the best way to make that happen?

Here is a link to view the site - https://pcfstag.wpengine.com/.

Hi Brenden,

That's weird,menu_bar_items should appear on mobile by default.

Are you using any custom functions or a child theme?

And is your GP theme and GP Premium plugin up to date?

Let me know :)

I do have a child theme with some functions. When I deactivate the child them, the button shows up on mobile, but not in the way I had hoped. I want the button to show up (below other menu items) only after opening the hamburger menu.

Here is what is looks like - https://share.getcloudapp.com/KouJ9pPL

Here is what I want it to look like - https://share.getcloudapp.com/Wnu0moOj

I see what you mean, in this case, let's try after_primary_menu hook instead ofmenu_bar_itemshook.

Then add this CSS:

#site-navigation.toggled .inside-navigation > .gb-button-wrapper {
    display: block !important;
    order: 5;
}

Let me know if it works!

This works when the hamburger menu is open, but the button is showing even when the hamburger menu is closed.

Here is a screenshot - https://share.getcloudapp.com/04ux67OD

Is there a better way to approach to this type of header (logo on left, menu in the middle, button on the right)? This is a pretty common layout so it seems like it should be possible.

Is there a better way to approach to this type of header (logo on left, menu in the middle, button on the right)?

That layout is definitely doable. The main issue here is that your logo is too wide and takes too much space so there is simply not enough space left for the button and toggle.

Would you consider using just the icon without the site title and tagline for the mobile header logo?

It would work the best :)

I will consider that option on mobile, but can you tell me how this site (https://www.periodwhisperer.com/) is setup as it seems to be doing most of the things I am looking to do (aside from the center nav on desktop).

That worked as desired, thank you!

You are welcome :)

This archived topic is closed to new replies.