[Resolved] Question about items outside hamburger menu on mobile

[Hernan]

Hi, Is there a way to show items outside of the hamburger menu on mobile?

I’m thinking of showing a custom link that is visible at all times, even on mobile devices

Thank you very much best regards

[Leo]

Hi there,

When you say “outside of the hamburger menu on mobile”, where do you mean exactly?

Would the menu_bar_items hook work?
https://docs.generatepress.com/article/generate_menu_bar_items/

Let me know 🙂

[Hernan]

Thank you very much, it’s exactly what I needed

[Hernan]

Perhaps the only doubt I would have is that all the elements will be on the right, perhaps that could be a problem (understanding that there is a “normal” menu that one would like to hide on mobile)

[Hernan]

For example, in this case I would like to replace the first icon with one inserted via hook (so that it is visible at all times on mobile, it is a custom post type with a custom search page) but the icon via hook is on the right of the menu breaking the design it had

[Fernando]

Hi Hernan,

Would you like to hide a Block you added on Mobile? If so, you can add a hide-on-mobile class to it. Reference: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

[Hernan]

No, I would just like to replace the icon on the left with the one on the right

It doesn’t work to put order:-1 to the new icon to put it at the beginning. I think it should work to order each element so that the icon can be positioned where I want (at first, where the old icon was) but not sure, maybe there is a better way

[David]

Hi there,

where can we see this – can you share a link to the site ?

[Hernan]

I’m working locally right now (I’m testing what I can display outside the hamburger menu without damaging the aesthetics of the web)

My question is theoretical, my point is that whenever the hook is used the elements will be on the right, which most of the time makes all the sense in the world (for example, adding buttons to the menu) but for example the icons it is more likely that everyone wanted to place them on the left, at the beginning of the menu

[Ying]

Hi there,

We’ll need to see your header structure to know what exact CSS to use to move the menu bar items.

For now, can you give this CSS a try?

.menu-bar-items {
    order: -1;
}

[Hernan]

That snippet of code works, it changes the order of the hook correctly and is useful for those who want to insert icons to their menu (on the left side of the menu)

In my particular case there is additional complexity, I am inserting elements to the right and I would like to insert an icon to the left. I have inserted two buttons and I am thinking of inserting the magnifying glass occupying hook, but I would like to keep the layout on the desktop, that is, the search icon on the left)

Does it sound possible or am I going into something too farfetched?

Thank you very much I always learn a lot with you

[Ying]

Not sure i understand what you are trying to achieve.

Any chance you can show me some mockups for mobile and desktop?

[Hernan]

I would like to replace the search icon with a new one (using hook, so that it is visible on mobile)

Just for the sake of graphics or simplicity, it’s like I want to move the “forum” button to the top left of the menu (I don’t really want to do that, but that would be the style to apply to the new search icon)

Maybe not feasible given that I understand it as separate containers

[Ying]

So you want a layout like this if I understand correctly?
https://www.screencast.com/t/CtAmv6m3zkl

How about mobile?

logo – search icon – hamberg icon?

[Hernan]

No, on the desktop I want to keep the design that I already have, that is, the search icon on the left, at the beginning of the menu:

On mobile I would like to have the search icon visible:

[Author]

Posts