Search bar/icon on tablet version

[Maddy]

Hi Zex,

I haven’t noticed before but on the tablet landscape position, the search icon goes on the second line. In the portrait position there is the hamburger menu and the search icon. When I press the search icon, the search bar appears way up on top of the hamburger menu. Can you please help me fix these issues? I would like the search bar closer to the search icon. Thank you so much for your help.

Best wishes,
Maddy

[Zex]

Hi, Maddy!

Try to insert the following code into Customizing->General->Additionall CSS:

@media only screen and (max-width: 992px) {
    .vision-search-box.active{
        top:60%!important;
        right:50px!important;
    }  
  }

Adjust the top and right values as you need.

Regards

• This reply was modified 2 years, 11 months ago by Zex.

[Maddy]

Hi Zex,

Thank you so much for your help. Can you also help me fix the menu on the tablet horizontal position? The search icon goes on the second line.

Best regards,
Maddy

[Zex]

Hello, Maddy!

To fix that, navigate to your custom CSS, and replace this code:

.mobile-menu-icons{
  display: relative!important;
  flex-direction: column!important;
	margin:10px;
	right:0px!important;
}
.mobile-menu-search{
 order: 2!important;
 margin:10px auto!important; 
 text-align: center!important;
}

https://prnt.sc/ti8esg (delete this code)

with the following:

.mobile-menu-icons{
	margin:10px;
	right:0px!important;
}
.mobile-menu-search{
 margin:10px auto!important; 
 text-align: center!important;
}
.mobile-menu-toggle.toggle--elastic {
    margin-left: 5px;
}

Regards

[Maddy]

Hi Zex,

The code seems to not change at all the second line on the horizontal position but adds the search icon next to hamburger menu on the portrait position which I don’t want to. Is there another way to fix it?

Best regards,
Maddy

[Zex]

Sorry for the misunderstanding 🙂

Now I see the problem.

So, forget the previous post and add additionally the following code into your custom CSS:

@media (max-width: 1022px), (min-width: 993px) {
.main-navigation>div>ul>li {
    padding-right: 20px!important;}
}

Regards

[Maddy]

Thanks, Zex. Everything works fine now.

[Author]

Posts