Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #921934

    What I need:
    – The same hamburger/overlay menu experience (logo left – hamburger right) from mobile all the way up to 1199px (just under the 1200px)
    – Have 2 different menu lists, one for “desktop” (min-width: 1200px) and one for “mobile/tablet” (max-width:1199px)

    I figured out how to move the logo to the left for max-width:1199px. And I’ve already created the 2 different menus, assigned their classes within the Main Menu area, and added the code below to my CSS:

    @media only screen and (max-width: 1199px) {
    .only_desktop { display: none !important; }}
    
    @media only screen and (min-width: 1200px) {
    .only_mobile { display: none !important; }}

    Then, to turn the mobile menu into a hamburger/overly, I added some more code per what you suggested in various threads (below), and it kind of works, except 2 problems:
    1. the “x” close button sometimes disappears on the desktop version at width below 1200px.
    2. The menu sits below the logo (as it has simply replaced the regular desktop menu)

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

    Do I need to completely start over? Is there a better way to make sizes 768 through 1199 look just like the 767 and below?

    • This topic was modified 6 years, 4 months ago by katesi4.
    #921947

    Hey Katie,

    “The menu sits below the logo (as it has simply replaced the regular desktop menu)” – At which resolution does this occur? You I am seeing the menu overlay throughout all stages. Are you looking for a different effect?

    Best regards,
    Jordan Shannon

    #921971

    This is what I’m seeing:
    989px and below: the “correct” mobile menu (logo left aligned, menu right aligned)
    990px – 1199px: the “incorrect” mobile menu (below the logo)
    1200px and up: regular text menu

    It’s the middle size that I’m tried to get to look like the mobile experience (989 and below) so essentially it appears as if there are only 2 breakpoints for the menu (1. wide desktop which shows the whole menu, 2. everything below wide desktop which shows the same mobile experience)
    Does that make sense?

    Also I noticed that my adjustment to this class (.menu-item) was hiding the menu in the footer, so i know I can’t add display: none to that one. So I changed it to #top #header .menu-item, but that hides the search icon too, which I still want to display.

    #921990

    UPDATE:
    To make things easier on myself, I decided to change the Header Layout to “logo left, menu right,” and then checked the box “Let logo and menu position adapt to browser” under Header Behavior. Then I adjusted my two new classes .only_desktop and .only_mobile so that now the header is the style I want it from mobile through to the width that accommodates my long menu at 1350px.

    But in order to show the search icon/button, I know I’m supposed to remove “display:none;” from #top #header .menu-item …I just don’t know which class I’m supposed to add it to in order to hide my “desktop” menu, but still keep the search button.

    #922186

    Hi katesi4,

    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: 1350px) {
      #top #header #menu-item-search.menu-item {
        display: block;
      }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #922416

    Thank you so much, that works perfectly!

    #922551

    Hi,

    I’m glad you were able to get this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Change breakpoint of mobile menu AND display a different menu at mobile’ is closed to new replies.