Hello,
My website on a mobile device is different from the desktop view. My website is https://shopsimplysageboutique.com/ . If you open it on a desktop, it looks perfect, but once it is opened on a mobile device the top menu gets distorted and there are now 2 search bars. My theme is the turbo version. I am not sure how to fix this but I need to. I’ve attached images below of the desktop view versus the mobile view.
This is the mobile view.
And this is the desktop view.
I have reviewed the website both in desktop and mobile version, and I have found that to resolve this issue we have to make some changes in CSS.
I have added some CSS that should be added in the code for mobile view only.
menu-position–block.search-enabled–true .nav.nav–center {
padding-left: 0;
flex-direction: column;
}
In the .search_container class, the previously defined CSS was:
search_container
{
width:100%;
max-width:200px;
padding-left : 20px;
}
I have made some changes in this, like:
search-container
{
width: 100%;
max-width: inherit;
padding-left: 0;
margin-left: auto;
margin-right: auto;
}
For adjusting the mobile logo alignment, apply the following CSS only to screens with a maximum width of 319 pixels, targeting specifically smaller mobile devices:
header .top-bar a.mobile_logo
{
justify-content: flex-start;
}
before it was justify-content:center;
In the .menu .vertical-menu_submenu class, the text-align property was previously set to ‘left’. I’ve updated it to ‘center’.
If anything else is needed to change, feel free to contact me. Thank You,
