-
AuthorPosts
-
September 27, 2016 at 5:37 am #692058
Since the last update I’ve lost the search bar on my mobile device(smart phone). I ‘ve tried the code in earlier posts and they did not solve the problem. Just wondering if there is a new issue since the last update and I have not found the thread with the solution.
September 27, 2016 at 4:12 pm #692322Hey chasteandswank,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) { .main_menu .avia-menu, #header_main_alternate { display: block !important; } .av-main-nav > li { display: none; } li#menu-item-search { display: block!important; margin-top: -90px; right: 70px; } .responsive .main_menu { float: right; }}
Best regards,
VinaySeptember 28, 2016 at 1:16 pm #692586Hi.
Thanks for the code. It works in child themes style css but not in quick css??
There is a problem though, it appears in the centre of my logo, either on top or behind.
I have played around with the top and right margins but that just moves the cart and drop down menu with it??
Maybe it needs to go in the top menu as a fix?
I’ll leave it so you can take a look. The problem is on a smart phone (mobile) view.September 28, 2016 at 1:37 pm #692609Hi,
There is simply not enough space on the mobile view to fit all the 3 icons with the logo .
Please reduce the logo size and it should look good.
@media only screen and (max-width: 480px) { .responsive .logo img { max-height: 62px!important; }}
Best regards,
VinaySeptember 28, 2016 at 1:50 pm #692628Awsome! That worked. There is another issue now, when the search box opens it is off the left side of the screen so you only can see the right side of the box. When you type in a search you can’t see what you type as is is off the left side of the screen??
Is there a way to get the search in the top header? I’ve tried this https://kriesi.at/support/topic/search-icon-on-mobile-devices/ but I end up with [avia_search] in the top menu instead of teh search icon.September 28, 2016 at 3:18 pm #692734Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 480px) { li#menu-item-search { right: 0px!important; } .avia-search-tooltip { margin-left: -86px!important; } }
Best regards,
VinaySeptember 28, 2016 at 10:26 pm #692891Hi.
I added all 3 pieces of code. Now the search magnifying glass is behind the cart and hamburger menu. If I tilt the mobile phone to landscape it appears.September 30, 2016 at 8:50 am #693565Hi.
It was there all along just hidden.
I came up with this and it seems to work –@media only screen and (max-width: 480px) {
.responsive .logo img {
max-height: 62px!important;}}@media only screen and (max-width: 767px) {
.main_menu .avia-menu, #header_main_alternate {
display: block !important;
}
.av-main-nav > li { display: none; }
li#menu-item-search {
display: block!important;
margin-top: -90px;
right: 110px;
}
.responsive .main_menu {
float: right;
}}
@media only screen and (max-width: 480px) {
li#menu-item-search {
right: 110px!important;
}
}Thanks again for your help
September 30, 2016 at 6:53 pm #693989Hi,
Glad it’s sorted for you!
Thank you for using Enfold :)Best regards,
Vinay -
AuthorPosts
- The topic ‘search bar missing on mobile’ is closed to new replies.