Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #909434

    Apologies, but I’m having issues working out the breakpoint for the menu. Lots of items at the top-level.
    Tried a few previously-suggested snippets of code, but they are not working.
    Link to site in the Private Content section.
    Thanks much,
    Steve

    #909552

    Hey spidercreations,

    Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:1124px) {
      #avia-menu .menu-item {
        display: none;
      }
    
      #avia-menu .av-burger-menu-main {
        display: block;
      }
    }

    Hope this helps.

    Best regards,
    Nikko

    #909761

    Interesting. Note the code did not work when I put it into the style.css file for the theme. (Using a child theme.)
    Placed in the General Styling section, it works, BUT.
    At one break point the hamburger menu displays under the logo and left justified, then at another break point the header goes transparent and the menu is right justified as expected.
    Can we just get the hamburger menu to stay right justified?
    Thank you!
    Steve

    #910099

    Hi Steve,

    Please try the following CSS as well:

    @media only screen and (min-width: 990px) and (max-width: 1124px) {
    #avia-menu {
      width:auto !important;
      float:right: !important;
    }
    }

    Best regards,
    Rikard

    #910282

    Thank you for the reply. To clarify, I’m now using this code in the Enfold Quick CSS

    ‘@media only screen and (max-width:1124px) {
    #avia-menu .menu-item {
    display: none;
    }

    #avia-menu .av-burger-menu-main {
    display: block;
    }
    }

    @media only screen and (min-width: 990px) and (max-width: 1124px) {
    #avia-menu {
    width:auto !important;
    float:right: !important;
    }
    }’

    The same issue is happening. Note that I do have some CSS in the style.css for the child theme. It is…

    ‘/* For the ALB, just hide an element using this. Remember do not us . in the ALB setting */
    .hidethis { display: none !important; }

    /*This is a fix for the Event map being too narrow on the Event page.*/
    .single-tribe_events .tribe-events-venue-map { width: 100% !important;}

    /* Let’s ditch the fancy ampersand */
    .special_amp {
    font-family: inherit;
    font-style: normal;
    font-size: inherit;
    line-height: inherit;
    font-weight: bold;
    color: inherit!important;
    }’

    So I’m not sure if there is a conflict? (I don’t think so.)

    I generally try to use the style.css file for the child theme CSS. Should I be using Quick CSS instead? I seem to have occasional issues where changes work in Quick CSS, but are ignored in the Child Theme CSS.
    Steve

    #910297

    Hi,

    Just to answer this question:

    Note the code did not work when I put it into the style.css file for the theme. (Using a child theme.)
    Placed in the General Styling section, it works, BUT.

    The reason it works in Quick CSS and not in style.css is because of browser caching or if there’s a caching plugin active which prevents the fetching of the updated (external) css and instead uses the old css cached in the browser.

    Can you try to replace this css code:

    ‘@media only screen and (max-width:1124px) {
    #avia-menu .menu-item {
    display: none;
    }
    
    #avia-menu .av-burger-menu-main {
    display: block;
    }
    }
    
    @media only screen and (min-width: 990px) and (max-width: 1124px) {
    #avia-menu {
    width:auto !important;
    float:right: !important;
    }
    }’

    with:

    @media only screen and (max-width:1124px) {
      #avia-menu .menu-item {
        display: none;
      }
    
      #avia-menu .av-burger-menu-main {
        display: block;
      }
    
      #avia-menu {
        width:auto !important;
        float:right: !important;
      }
    }

    Hope this helps :)

    Best regards,
    Nikko

    #910305

    Thank you, but still experiencing the same issue. Cleared browser cache and I also tried Firefox and Safari. (All Mac stuff.)
    I appreciate your efforts. Maybe it has to do with the header setup or background video?

    Thank you again,
    Steve

    #910324

    Hi Steve,

    Hmm, I don’t think it’s because of the video, can you try to replace the code I gave to this one:

    @media only screen and (max-width:1124px) {
      #avia-menu .menu-item {
        display: none;
      }
    
      #avia-menu .av-burger-menu-main {
        display: block;
      }
    
      #avia-menu {
        width:auto !important;
        float:right: !important;
      }
    
      .responsive #top #wrap_all .main_menu {
        top: 0;
        height: 80px;
        left: auto;
        right: 0;
        display: block;
        position: absolute;
      }
    
      #header_main_alternate {
        display: none;
      }
    }

    Hopefully this should fix it. :)

    Best regards,
    Nikko

    #910328

    That works. Thanks again Nikko. Much appreciated.
    Steve

    #910357

    Hi Steve,

    You’re always welcome :) We’re happy to help. Let us know if you need further assistance or if we can close this thread :)

    Best regards,
    Nikko

    #910383

    You can close. Thanks!

    #910492

    Hi,

    Thanks for letting us know. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

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

The topic ‘Breakpoint for navigation menu’ is closed to new replies.