Mobile menu header covering logo - Support | Kriesi.at

Tagged: burger

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

Author

Posts
September 20, 2021 at 11:35 am #1321599

aliciapotts
Participant

Hi,
I am working on a site but the mobile version of the header is not appearing how I would like.
I would like the logo centred and the burger and cart icons below.
I have tried some coding from the forum but it didn’t have the result I wanted so I have deleted it and am asking you for help.

September 21, 2021 at 4:39 am #1321703
Ismael
Moderator
Hey aliciapotts,

Thank you for the inquiry.

You can use the following css code in the Quick CSS field to center align the logo and move the burger icon below it. Make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.
```
@media only screen and (max-width: 767px) {
  #header_main .inner-container {
    height: 160px;
    position: relative;
  }

  .responsive #top .logo {
    width: 100%;
    padding-bottom: 80px;
  }

  .responsive .logo img {
    margin: 0 auto;
  }

  .responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all .main_menu {
    left: 50%;
    z-index: 102;
    transform: translateX(-50%);
    top: 80px;
    right: auto;
  }
}
```
Best regards,
Ismael
September 23, 2021 at 2:53 am #1321970

aliciapotts
Participant

Hi Ismael,

Thank you for your help.

I used the code you suggested and the burger menu is under the logo as requested but it doesn’t work. By that I mean when I click on it the menu does not appear. Also, the cart symbol is on top of the logo. I would like it to the far right so not covering the logo or under with the burger.

Alicia

September 24, 2021 at 7:01 am #1322129
Ismael
Moderator
Hi,

Thank you for the update.

We adjusted the css code a bit to adjust the position of the cart icon and fix the mobile menu issue. We also adjusted the size of the logo so that it does not cover the whole header container.
```
@media only screen and (max-width: 767px) {
  #header_main .inner-container {
    height: 160px;
    position: relative;
  }

  .responsive #top .logo {
    width: 100%;
    padding-bottom: 80px;
  }

  .responsive .logo img {
    margin: 0 auto;
    max-height: 100px !important;
  }

  .responsive.html_bottom_nav_header.html_cart_at_menu #top #wrap_all .main_menu {
    z-index: 102;
    top: 80px;
    right: auto;
    width: 100%;
  }

  .responsive #top .av-logo-container .avia-menu .menu li.av-burger-menu-main {
    height: 80px;
    left: 50%;
    transform: translateX(-50%);
    border-right: 0;
  }

  .responsive #top .av-logo-container .avia-menu .menu,
  .responsive #top .av-logo-container .avia-menu {
    width: 100%;
  }

  #top #wrap_all #header .av-small-burger-icon a {
    padding: 0;
    height: 80px !important;
    line-height: 80px !important;
  }

.responsive #top #header_main #menu-item-shop .cart_dropdown_link {
    margin-top: -30px;
    margin-right: -30px;
}
}
```
Again, please do not forget to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code. Let us know how it goes.

Best regards,
Ismael
March 28, 2024 at 10:07 pm #1438571

Sethkonkel
Participant

I am having the same issue and tried the code above. I can get the cart to move to the next line but I can’t get the search icon or the hamburger menu to move. Any ideas on what might be wrong?

April 1, 2024 at 4:14 am #1438873

Ismael
Moderator

Hi,

@Sethkonkel: You can set the Enfold > Main Menu > General > Menu Items For Mobile settings to the second option (Active for Smartphones and Tablets) to ensure the mobile menu displays earlier or when the screen width is less than 989px. If the issue persists or if you need further assistance, please open a new thread.

Best regards,
Ismael
Author

Posts

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

The topic ‘Mobile menu header covering logo’ is closed to new replies.