Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 13, 2020 at 6:57 pm #1222395
    fcp

    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 #1222715
    Victoria

    Hey 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,
    Victoria

    June 17, 2020 at 10:47 pm #1223498
    fcp

    Hi 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 #1223841
    Victoria

    Hi 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,
    Victoria

    June 20, 2020 at 12:04 am #1224193
    fcp

    Hi 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 switched

    June 26, 2020 at 12:16 pm #1225785
    Yigit

    Hi,

    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,
    Yigit

    July 30, 2020 at 12:40 am #1234027
    fcp

    Hi guys,
    I now solved my menu issue.
    This topic can be closed.
    Thanks a lot for your help! ;-)

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Search icon not showing on mobiles and tablets’ is closed to new replies.