[Resolved] Navigation elements mobile view

[baidy]

Hi GP support,
Thanks for the help earlier

I have a question this time, about the display of elements in mobile view, breakpoint view is 1307px in my case.
The desktop view is ok.

I was set on this task on mobile view:

-displaying elements in this order: search icon on the left border, then hamburger menu on the far right (done)

picture: https://i.postimg.cc/mgJbPywk/pic1.png

It’s thanks to the following code I dug up in the forum from a solution Ying provided for a user :

}
@media (max-width: 1307px) {
    .menu-bar-items {
        order: -1;
        margin-right: auto;
    }

now two issues have arisen :

– first, when the sticky navigation is activated, my logo is making its entrance, but the problem is that it’s not aligned in the middle same as the search icon; not aligned on the left border, only the hamburger menu is perfectly at the far right:

picture: https://i.postimg.cc/902WbXR7/pic3.png

– second, when you click on the search icon, and the search bar appears, the text being entered is passing behind the X button, same thing is happening for the sticky navigation with the addition that the X button has moved forward

picture normal:https://i.postimg.cc/RFjsfqYc/pic4.png
sticky:https://i.postimg.cc/Kj2jRDmB/pic4-sticky.png

in conclusion, I would like to align everything perfectly in the navigation when the logo appears & resolving this search bar issue with the text and X button.

Thanks for your support GP

[Ying]

For issue 1. Change this CSS:

@media (max-width: 1307px) {
    .menu-bar-items {
        order: -1;
        margin-right: auto;
    }
}

to:

@media (max-width: 1307px)
.menu-bar-items {
    order: -1;
    margin-right: auto;
    margin-left: 0 !important;
}
}

For issue 2, the close icon will be at the same position as the search icon, so usually placing the search icon on the right end is ideal.

So please consider to switch the position of the menu icon and search icon.

[baidy]

thanks

[Ying]

No problem 🙂

Let me know if you need further assistance.

[baidy]

issue 1 got resolved

and I am going to follow your advice and switch the position of search and menu.

is there a specific CSS for it?

[Ying]

and I am going to follow your advice and switch the position of search and menu.

Remove this CSS:

@media (max-width: 1307px)
.menu-bar-items {
    order: -1;
    margin-right: auto;
    margin-left: 0 !important;
}
}

Add this CSS:

@media (max-width: 1307px)
nav#mega-menu-wrap-primary {
    order: -1;
    margin-right: auto;
}
}

[baidy]

thank you got the results

[Ying]

You are welcome 🙂

[Author]

Posts