Site logo

[Resolved] Question about items outside hamburger menu on mobile

Home Forums Support [Resolved] Question about items outside hamburger menu on mobile

Home Forums Support Question about items outside hamburger menu on mobile

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

    #2556648
    Leo
    Staff
    Customer Support

    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 🙂

    #2556667
    Hernan

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

    #2556675
    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)

    #2556694
    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

    #2556806
    Fernando
    Customer Support

    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/

    #2557342
    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

    #2557369
    David
    Staff
    Customer Support

    Hi there,

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

    #2557423
    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

    #2557826
    Ying
    Staff
    Customer Support

    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;
    }
    #2557862
    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

    #2557899
    Ying
    Staff
    Customer Support

    Not sure i understand what you are trying to achieve.

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

    #2557916
    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

    #2557962
    Ying
    Staff
    Customer Support

    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?

    #2557983
    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:

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