Hamberger menu trigger - Support | Kriesi.at

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

Author

Posts
November 9, 2024 at 1:58 am #1470938

photographie-tous-azimuts
Participant

Hi,

My main menu runs into my logo. I added to Enfold Quick CSS setting the @media code found in this page, but it does not work, no matter what value I set max-width to. If I change max-width to min-width, the hamberger menu is displayed at any screen size, to the CSS code does something.

Thanks,
Serge

November 9, 2024 at 2:33 am #1470939

photographie-tous-azimuts
Participant

Hi,

The CSS had the side effect of removing the search icon in the main menu on phones. I moved the CSS to the Quick CSS of my dev site for you to see.

Serge

November 9, 2024 at 9:26 am #1470941
Guenni007
Participant
did you copy&paste that code? because if it is your page ( and your nick is very informative ) than a code like:
```
@media only screen and (max-width: 1023px) {
  #top #header .av-main-nav > li.menu-item  {
    display: none!important;
  }
  #top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
  }
  .responsive #top #header .av-main-nav #menu-item-search {
    display: block !important;
  }
  .responsive #top #header .av-main-nav #menu-item-search  > a {
    font-size: 24px;
  }
}
```
will work in dev tools. So if you realy entered the correct code – then it might be a caching issue that you can not see the changings. So refresh all caches of such tools – and refresh on Enfold on Performance Tab just at the bottom: “Delete Old CSS And JS Files?”

1023px seems to be a good value – because on the ipad Pro 12.9 inch – (1024px) the text menu is still visible and is not above the logo.

PS: i added the code to show the search icon aswell on burger active and with a little bigger icon.
November 9, 2024 at 9:58 am #1470942
Guenni007
Participant
ps – on mobile phones with less then 375px width (protrait mode) the search drop-down window has a lot of space on the right and is nearby the left side. you can shift that window.
Add inside the media query above:
```
  /*** if you like to shift the search drop down window ***/
  /*** insert to the media query above that additional css ***/

  #top .avia-search-tooltip {
    top: 95% !important;
    margin-left: -70px !important;
  }
  #top .avia-search-tooltip .avia-arrow-wrap {
    right: 60px !important;
  }
  .avia_mobile #top #searchsubmit {
    height: 39px !important;
  }
```
November 9, 2024 at 1:46 pm #1470955

Mike
Moderator

Hi,
It looks like Guenni007 was able to help, thanks Guenni007.
When I check your dev site, the menu doesn’t overlap the logo above 1024px, and below it is the burger menu.
see the screenshots below

Best regards,
Mike

November 9, 2024 at 5:02 pm #1470963

photographie-tous-azimuts
Participant

Hi Guenni007 and Mike,

Thanks. You are right: looks like this was a cache problem. Usually, changes to Quick CSS don’t cause cache problems, unlike global.css changes.

However, there was still a problem remaining: the CSS removes the search magnifying glass on mobile phones. Without the CSS, the magnifying glass appears next to the hamburger menu. This is a very nice feature I want to keep. So I added the code below inside the @media section. It does works but, as I resize the window, the magnifying glass first appears at small size before growing to hamburger menu size as the window shrinks smaller. Looks I need to target more CSS to force the magnifying glass icon to hamburger size at 1023px, but I can’t figure which one…

#top #header .noMobile.menu-item.menu-item-search-dropdown.menu-item-avia-special {
cursor: pointer;
display: block!important;
}

Best regards,
Serge

November 9, 2024 at 5:21 pm #1470964

Mike
Moderator

Hi,
I see the search icon at all screen sizes, try clearing your browser cache. Are you testing on a real device or Dev Tools?

Best regards,
Mike

November 9, 2024 at 5:39 pm #1470965

photographie-tous-azimuts
Participant

Hi,

Yes, when the screen size reaches 1023px it does appears, but smaller (the size for the regular menu). Then, when the screen reaches around 700px, it finally grows to hamburger menu size.

I was testing this by resizing my browser window. The problem also occurs on my iPad Pro in portrait mode, where the magnifying glass is smaller than the hamburger menu. On my iPhone 15 Pro, it is OK since the screen is small enough in both landscape and portrait mode.

Best regards,
Serge

November 9, 2024 at 6:43 pm #1470970
Mike
Moderator
Hi,
I think this I understand now, try adding this css:
```
@media only screen and (max-width: 1023px) {
    .responsive #top #wrap_all #header .menu-item-search-dropdown>a {
        font-size: 24px;
    }
}
```
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike
November 10, 2024 at 6:22 am #1470988

Guenni007
Participant

hm – isn’t it part of that css i gave to you? https://kriesi.at/support/topic/hamberger-menu-trigger/#post-1470941

because i got three ID’s as well inside that rule – it should work without !important too.

November 11, 2024 at 3:59 am #1471038

photographie-tous-azimuts
Participant

Hi Mike and Guenni007,

Actually, I realize the answer were in the Guenni007’s code to start with. Kriesi, you should update the doc to include his code that takes care of the Search icon! Thanks you both, it woks perfectly now. Enfold is a very nice theme.

Best regards,
Serge
Author

Posts

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

The topic ‘Hamberger menu trigger’ is closed to new replies.