Menu Labels overlay logo

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

• This reply was modified 5 years, 7 months ago by MontanariGiulio.

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

• This reply was modified 5 years, 7 months ago by MontanariGiulio.

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

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