Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #1332624

    HI, I noticed that my menu is wrapping after 1652 pixels (feel free to double check that..) and I am thinking it would be good to switch to the hamburger menu below that size. I found this code on the internet and tried it, but the menu just disappears until the mobile is triggered. Can you please help me? Thanks, Rob

    /* change breakpoint for mobile menu */
    @media (max-width: 1652px) { /* Change the width as you need */
    .responsive #top #avia-menu.av-main-nav .menu-item {
    display: none !important;
    .responsive #top .#avia-menu.av-main-nav .menu-item-avia-special {
    display: block !important;

    The site is http://www.thomashenthorne.com
    Marin Real Estate Agent


    Hey Rob!

    I just checked your website and it seems to be switching to mobile menu at 1300px. You may also have a CSS code similar to following one in Quick CSS field or in Style.css file of your child theme which might be the reason why menu did not show up at certain screen sizes.

    /* Activate burger menu */
     @media only screen and (max-width: 1300px) {
    #top #header .av-main-nav > li.menu-item  {
        display: none!important;
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;

    Could you please check if that is the case? :)



    Hey Yigit! Good to hear from you and happy holidays.

    I copied the quick CSS.. which has grown over the years.. to private content… is something in there conflicting? Feel free to let me know any that are obsolete / conflicting that I can delete.



    Hi Rob,

    Happy holidays!

    Could you please try replacing the code with the one I attached in private content field?

    I found following code and updated screen size so that should fix the issue :)

    @media only screen and (max-width: 1300px) and (min-width: 768px) {
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
    display: block;
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;

    Best regards,


    Hi Yigit, thanks so much for this.
    I am sorry – maybe not enough coffee this morning, but I have been comparing my custom CSS to the pastebin and my eyes are swimming.
    In the pastebin, there is code at the top, then there’s a section at the bottom called “RAW PASTE DATA”… Is the Raw Paste Data what I should copy and paste, all of it, to replace all of my custom CSS? Or do I take the snippet in your response and figure out where that goes and paste it into my custom CSS in the appropriate place? I am not sure if you made other changes elsewhere.

    Sorry – I feel very stupid but have been staring and comparing all the different versions and now they all look the same to me.. haha



    Hey Rob,

    Yes, you can copy the code from “RAW PASTE DATE” field. The section above just shows the content.

    Please do not feel that way. I just changed “1300px” to “1652px”. Very small change so very easy to miss :)



    Thanks so much and the code is live and working!
    Any idea why the hamburger menu switches over to the left side of the screen as you narrow the screen, then back to the right ?
    It would be great if it would stay on the right the whole time… :



    Hey Rob,

    I updated the code a bit. Could you please update CSS code once again? :)



    Perfect, thank you!
    While you were in the custom CSS, do you say any that is obsolete that I should delete?
    I know there’s the old mobile css selector in there, but since some pages on the site still use that I guess I will keep it, but anything else that jumps out?

    Thanks so much,


    Hey rob,

    I could not see any selector that is deprecated but there are some things you can do with options instead of using CSS codes.

    For example, you have following code to make borders rounded on button element with “rounded-button” class

    #top .rounded-button a.avia-button {
    border-radius: 30px;

    You can edit button elements and adjust their border radius in Styling > Borders now – https://i.imgur.com/7rCORiZ.png

    Instead of using following code

    .main_menu ul:first-child > li > a { font-size: 18px; }

    You can go to Enfold theme options > Advanced Styling and edit “Main Menu Links” to increase main menu font size

    Instead of using following code

    p.toggler.av-inherit-border-color {
    background-color: #002348;
    color: #ffffff

    You can edit Accordion element and use custom color options

    Instead of following code
    h1, h2, h3, h4, h5, h6 { text-transform: none !important; }
    You can go to Enfold theme options > Advanced Styling and edit “All Headings (H1-H6)” to change text transform

    That seems to be it :)



    GREAT thank you so much Yigit!




    You are welcome, Rob! Always happy to help :)

    Best regards,


    Thanks again and happy holidays! OK to close thread.



    Happy holidays! :)


Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Adjust Mobile Menu Breakpoint 4.8.8’ is closed to new replies.