[Support request] Add items into mobile menu

Home Forums Support [Support request] Add items into mobile menu

Home Forums Support Add items into mobile menu

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1609286
    Alberto

    Hello
    In mobile menu, I need to change the elements marked in this image (https://prnt.sc/wi9624) for those marked in this other image (https://prnt.sc/wi978g). They must be located just after language selector, as in the second image.
    I was trying it with generate_inside_mobile_menu hook, but I can achieve what I’m looking for.
    I’ve got the HTML and CSS, so I just need to place that elements where I told you (and only in mobile menu)
    Could you tell me how to achieve that?

    Thanks in advance

    #1609651
    David
    Staff
    Customer Support

    Hi there,

    that looks like the standard Mobile Menu, there is no Hook Inside of menu drop down.
    Add them as your last two menu items.

    Once there in there, send me a link to your site and ill provide some CSS to place them inline.

    #1609751
    Alberto

    Hi, David
    Thanks for replying!
    I don’t understand what you mean with “there is no Hook Inside of menu drop down.
    Add them as your last two menu items.”
    How slould I add the items?
    Currently there are two items in the mobile menu, as you can see in the first picture: email and phone
    Those, with the CSS in the second picture, are the items I want to add so I suppose you could use them if you mean they must be in the mobile menu.
    The website address is prueba.arenatours.com (arenatours.com is the one I use as reference. The one I’m trying to achieve)

    Regards

    #1609793
    David
    Staff
    Customer Support

    OK so you currently have the Email and Phone items in the menu, if you give both those items a CSS Class of menu-contact ( adding classes to menus link ) you can then use this CSS:

    @media (max-width: 767px) {
        #site-navigation.toggled .main-nav > ul {
            display: flex;
            flex-wrap: wrap;
        }
        .main-navigation ul li {
            flex: 1 0 100%;
        }
        .main-navigation ul > li.menu-contact {
            order: 20;
            flex: 1 0 50%; /* width of contact menu items */
        }
    }

    It will move the menu-contact items to end of the menu, and place them inline ( 50% wide )

    #1609896
    Alberto

    Hi, David!
    Thank you so much! It seems to work quite good if I don’t scroll down, but we must do something to make it works with sticky navigation.
    What’s the best approach?

    Regards

    #1609902
    Alberto

    Hi!
    OK, it seems to work fine adding a rule with #sticky-navigation

    Thanks a lot!

    #1610103
    David
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.