![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
June 13, 2020 at 6:57 pm #1222395
Hi,
I activated burger menu on screens smaller than 1014px using this code:@media only screen and (max-width: 1014px) { #top #header .av-main-nav > li.menu-item { display: none!important; } #top #header .av-burger-menu-main { cursor: pointer; display: block!important; }}
but search icon is not showing anymore.
What do I need to do to display search icon in the main menu?
If needed, you also can find a link and credentials to my website in private content.
Thanks a lot!June 15, 2020 at 4:21 pm #1222715Hey fcp,
Please try this code instead:
@media only screen and (max-width: 1024px) { nav.main_menu, #menu-item-search { display: block !important; } .menu-item { display: none; } .av-burger-menu-main.menu-item-avia-special { display: block; } }
If you need further assistance please let us know.
Best regards,
VictoriaJune 17, 2020 at 10:47 pm #1223498Hi Victoria,
I changed
@media only screen and (max-width: 1024px)
to
@media only screen and (min-width: 768px) and (max-width: 1024px)
in your code, to make it target tablets only, but there are many issues…I add three screenshots in private content:
Screenshot 1: my home page without any code
Screenshot 2: my home page with your code
…so as you can see, a part of secondary menu is not displayed anymore, shopping cart is not displayed anymore, and burger menu and magnifying glass appear twice.
Screenshot 3: a mockup of what I exactly need.Thanks a lot!
June 18, 2020 at 6:02 pm #1223841Hi fcp,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 1024px) { #header_main_alternate { display: none; } .html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main { padding-top: 148px !important; } }
If you need further assistance please let us know.
Best regards,
VictoriaJune 20, 2020 at 12:04 am #1224193Hi Victoria,
Thanks for your reply.For the problem you mentioned in private content, I replaced
@media only screen and (min-width: 768px)
by@media only screen and (min-width: 1025px)
, so it will not be a problem anymore.About your last code, did you mean adding this code to your previous one or replace your previous code by the last one?
On screenshot 1 is the result if I replace your code: so no menu at all.
On screenshot 2 is the result if I add your last code: so many issues compared to my mockup:
– shopping cart and secondary menu still missing
– vertical line displayed after burger menu need to be hidden
– search icon and burger menu need to be switchedJune 26, 2020 at 12:16 pm #1225785Hi,
I changed the code to following one
/* Activate burger menu */ @media only screen and (max-width: 1014px) { #top #header .av-main-nav > li.menu-item:not(.menu-item-avia-special) { display: none!important; } #top #header .av-burger-menu-main { cursor: pointer; display: block!important; }}
Please review your website :)
Best regards,
YigitJuly 30, 2020 at 12:40 am #1234027Hi guys,
I now solved my menu issue.
This topic can be closed.
Thanks a lot for your help! ;-) -
AuthorPosts
- The topic ‘Search icon not showing on mobiles and tablets’ is closed to new replies.