Avada Forums Community Forum Secondary top menu on mobile

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • StudioLevati
    Participant
    Post count: 4

    Hi, the site i’m working on has a Main navigation menu + a Secondary top menu.
    Web it’s all working fine, but when it comes to mobile, the Main menu turns into a burger menu (And i’m ok with that), but the Secondary top menu just breaks in 2 or more rows and it’s not how i want it to be.

    How can i solve this?
    Can it go in the burger menu too?
    Can i hide it and create a new mobile only menu with the content from both the menus together?

    Here’s an image to help you understand the situation:
    https://imgur.com/a/vkB5CU6

    Thank you for your time 🙂

    jstoffer
    Participant
    Post count: 1

    Hi I have these same isuue, die you find a solution?
    Thanks ahead for replying

    DarkAllMan
    Participant
    Post count: 67

    Indeed, I have the same! Would like a solution.

    StudioLevati
    Participant
    Post count: 4

    Use classic option for the top menu from theme options to fix the issue.
    wp-admin>>avada >>theme options>>menu>>mobile menu>>mobile menu design style

    ineditomultimedia
    Participant
    Post count: 1

    Hi, Indeed, I have the same!

    neilhow
    Participant
    Post count: 2

    Anyone solve this? Same issue here

    shaunhepple
    Participant
    Post count: 1

    Anyone solve this? Man it’s driving me crazy.

    antmeeks74
    Participant
    Post count: 1

    I recommend creating a new mobile menu, with all the menu items you want in it and then assign it to the “Mobile Navigation” section in WP Admin > Appearance > Menus. Next you should hide either the whole secondary header, or just the secondary menu items. If you have other content in the secondary header, like a phone number or social icons, you may just want to only hide the errant menu.

    To do this, first go to Avada Theme Options > Responsive > “Header Responsive Breakpoint” and get the pixel number it’s set to (for this example we’ll say 1235). Next, open your child theme “styles.css”, and add the following:

    @media screen and (max-width: 1235px) {
        nav.fusion-secondary-menu {
            display: none;
        }
    }

    The above will hide just the secondary menu at that breakpoint – Alternatively, you can hide the whole secondary header:

    @media screen and (max-width: 1235px) {
        div.fusion-secondary-header {
            display: none;
        }
    }
    imran3may
    Participant
    Post count: 4

    Hi,

    I have tried with the css code above; however, still, the secondary header is visible. How can I fix this issue? Support on this will be highly appreciated. I added the css inside avada style.css file

    Thanks

    siteducky
    Participant
    Post count: 3

    The CSS worked for me, applied in theme options CSS box…thank you!

    lidali.com
    Participant
    Post count: 4

    The following worked for me (think about changing the max-width for your site):


    @media
    screen and (max-width: 1100px) {
    .fusion-secondary-header {
    display: none;
    }
    }

    susanfinch
    Participant
    Post count: 2

    Thank you @lidali.com ! That made it so easy! Just need to add in my code in that header area in the options.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.