-
Posts
-
How can i enable the search icon on mobile?
http://www.wellnesslayers.com/Hi eladlev1!
Check out Yigit’s post here, https://kriesi.at/support/topic/search-box-in-mobile-responsive-menu/.
Regards,
ElliottI used this code:
@media only screen and (max-width: 989px) {
.html_mobile_menu_tablet .main_menu, .html_mobile_menu_tablet #header_main_alternate, .responsive #header .main_menu ul, #top #menu-item-search { display: block; }
.av-main-nav li { display: none; }}
@media only screen and (max-width: 990px) {
li#menu-item-search>a { font-size: 24px!important; }
nav.main_menu { float: right; margin-right: 15%; }}
@media only screen and (max-width: 990px) and (min-width: 500px) {
nav.main_menu { margin-right: 12% !important; }}and the search icon appear but the hamburger is gone, and on smaller screens the search disappear again and the hamburger come back…
Hi!
Please add following code to Quick CSS
@media only screen and (max-width: 767px) { li#menu-item-search, .main_menu .avia-menu { display: block !important; } .av-main-nav > li { display: none; }}Cheers!
YigitNow the menu links stay in mobile view and the header break, i see the links + the hamburger + search, i want only the hamburger and the search.
Hey!
You are using an old version of the theme, so please upgrade to Enfold 3.4.7 and let us know if you still need help afterwards.
Update WordPress as well.Regards,
AndyHi!
I checked your Quick CSS field and could not find the code Yigit provided you here. Please add it and let us know if you still need help afterwards.
Regards,
AndyWhen i add the code the header break look at the screenshot https://www.dropbox.com/s/gtlvlgrlky4nrc3/search.png?dl=0
Hi!
try to deactivate all plugins, to check if one is causing this issue and let us know about your results. If that does not help send us admin access, so we can take a deeper look into it. Are we allowed to deactivate all your plugins temporarily by ourselves as well for testing purposes?
Regards,
AndyI deactivated all the plugins, still didn’t help. can you please check it? (you can deactivate the plugins)
Hi!
I added this code into you Quick CSS field:
@media only screen and (max-width: 767px) { li#menu-item-search, .main_menu .avia-menu { display: block !important; } .av-main-nav > li { display: none; } li#menu-item-search { top: -52px; height: 0px; } }and now it seems to be fine for me. If you need something else, then please send us a mockup showing the results you want to achieve.
Cheers!
AndyHi!
replace my code from above with this:
@media only screen and (max-width: 767px) { li#menu-item-search, .main_menu .avia-menu { display: block !important; } .av-main-nav > li { display: none; } li#menu-item-search { top: -80px; height: 0px; left: 300px; } }and adjust top and left value as needed.
Best regards,
AndyI used the following code and now the search icon appear on the right place on mobile but it’s not responsive since the position is fixed. is it possible to have the search inside the mobile menu above or below the links with the search field already opened?
@media only screen and (max-width: 767px) {
li#menu-item-search, .main_menu .avia-menu {
display: block !important;
}
.av-main-nav > li {
display: none;
}
li#menu-item-search {
top: -90px;
height: 0px;
left: 230px;
}
}Hi!
no that won’t be easily possible. You can adjust media queries (max-width: 767px) to get different results on different screen sizes. For more information about this: css-tricks.com/snippets/css/media-queries-for-standard-devices/
Regards,
AndyHow can i position the search field under the icon (as in the desktop) and not on the top of the logo?
Hi!
I already gave you the code for it here. Play around with different values for left, top or/and add some right, bottom value into it, until it fits your need.
Best regards,
Andy
- You must be logged in to reply to this topic.