Archived topic

Add items into mobile menu

6 replies · Started by Alberto on January 7, 2021

Viewing posts 1–7 of 7

January 7, 2021 at 5:04 am #1609286

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

January 7, 2021 at 7:20 am #1609651

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.

January 7, 2021 at 8:20 am #1609751

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

January 7, 2021 at 8:42 am #1609793

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 )

January 7, 2021 at 10:17 am #1609896

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

January 7, 2021 at 10:22 am #1609902

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

Thanks a lot!

January 7, 2021 at 2:06 pm #1610103

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.