Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1007941
    #1008201

    Hey Fabio,

    Please try the following in Quick CSS under Enfold->General Styling to activated the mobile menu on an earlier stage:

    @media only screen and (max-width: 1385px) {
      nav.main_menu {
        display: block !important;
      }
      #avia-menu .menu-item {
        display: none;
      }
      .av-burger-menu-main.menu-item-avia-special {
        display: block;
      }
    }
    

    Best regards,
    Rikard

    #1008294

    Hey Rikard,

    thanks for your code, it worked like a charm!

    I’m so sorry to bother you again but I’m facing a new issue:

    I added “MENU” text near the MENU button on mobile. I would like to show up the search icon on the left of the word “MENU”. Unluckily the search icon box overlay the text and it isn’t clickable at all (link 1 and link 2).

    I would also love to know if it’s possible to show the big Search Icon up to the max resolution set on the mobile menu (it disappear when the browser window is wider than 1087 px – link 3).

    The Quick CSS I’m using:

    @media only screen and (max-width: 1385px) {
      nav.main_menu {
        display: block !important;
      }
      #avia-menu .menu-item {
        display: none;
      }
      .av-burger-menu-main.menu-item-avia-special {
        display: block;
      }
    }
    
    @media only screen and (min-width: 435px) {
    .av-hamburger strong {
    display: block;
    position: absolute;
    left: -115px;
    top: -42px;
    text-transform: uppercase;
    font-size: 34px;
    }}

    Please find in the private content area the screenshots of this issue.

    Thank you very much in advance for your time and help, I really appreciate!

    Fabio

    #1008783

    Hi,

    Thanks for the update.

    You can use this css code to adjust the search icon’s position.

    #top #menu-item-search {
        right: 80px;
    }

    And this css media query to adjust it even more on smaller screens.

    @media only screen and (max-width: 480px) {
    #top #menu-item-search {
        right: 10px;
    }
    }

    Screenshot: https://imgur.com/a/NMGxfaE

    Best regards,
    Ismael

    #1008827

    Hi Ismael,

    thanks for your help! I had some issues with overlays but after some tweaks, it’s just working fine! I also managed to add the Search Icon when the burger menu is visible. I quote the code in case it may be of help :-)

    @media only screen and (max-width: 1385px) {
      nav.main_menu {
        display: block !important;
      }
      #avia-menu .menu-item {
        display: none;
      }
      .av-burger-menu-main.menu-item-avia-special {
        display: block;
      }
    }
    
    @media only screen and (min-width: 435px) {
    .av-hamburger strong {
    display: block;
    position: absolute;
    left: -115px;
    top: -42px;
    text-transform: uppercase;
    font-size: 34px;
    }}
    
    @media screen and (max-width: 1380px) and (min-width: 490px) {
    #top #menu-item-search {
        display: block !important;
        right: 80px;
    }}
    
    @media screen and (max-width: 491px) and (min-width: 435px) {
    #top #menu-item-search {
        display: none;
    }
    }

    I have the really last question to ask you: how can i set the burger word “MENU” in a responsive way?
    Let me explain better: when I scroll down the browser window (between the resolution range 1090 px – 1523 px) the word “MENU” is not responsive, it just sticks at the top. It doesn’t align with other elements like Search Icon and Menu Icon. I tried to change the position values but nothing changed.

    Please find the screenshotted issue on the private content area.

    This is the code I’m currently using:

    @media only screen and (min-width: 435px) {
    .av-hamburger strong {
    display: block;
    position: absolute;
    left: -115px;
    top: -42px;
    text-transform: uppercase;
    font-size: 34px;
    }}

    Sorry to bother you again and thanks in advance for your time.

    Fabio

    #1009189

    Hi,

    Thanks for the update. I can’t reproduce that issue on my end. The “MENU” text displays when the screen width is less than 1385px and it seems to align properly with the mobile menu icon.

    // https://imgur.com/a/PDogIiP

    Best regards,
    Ismael

    #1009272

    Hey Ismael,

    thanks for your reply!

    The “MENU” text is aligned properly with the mobile menu icon only when the site is not scrolled down as you noticed. The issue appears when it comes to the scroll down: the “MENU” text doesn’t follow the natural positioning and resizing of the header (please find the screenshot of the issue linked in the private content area).

    Thanks again for your time and patience!

    Regards,

    Fabio

    #1009768

    Hi,

    I see. You can include this css code inside the css media query with the (min-width: 435px) breakpoint.

    .header-scrolled .av-hamburger strong {
        top: -20px;
    }

    Put it below the existing “.av-hamburger strong” css modification.

    Best regards,
    Ismael

    #1009819

    Hi Ismael,

    it works like a charm!

    Thanks again for your work and patience.

    As the issue has been solved the topic can be closed :-)

    Best regards,

    Fabio

    #1009994

    Hi Fabio,

    Great, glad you got it working :-)

    Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Menu Labels overlay logo’ is closed to new replies.