Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #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; } {
            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.

    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


    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.


    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.


    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 {
        display: block;

    If you need further assistance please let us know.

    Best regards,


    Thank you so much, that works perfectly!



    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.