Secondary top menu on mobile

[StudioLevati]

#470916

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]

#523327

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

[DarkAllMan]

#529522

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

[StudioLevati]

#529916

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]

#564709

Hi, Indeed, I have the same!

[neilhow]

#583907

Anyone solve this? Same issue here

[shaunhepple]

#601524

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

[antmeeks74]

#612490

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]

#619543

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]

#623752

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

[lidali.com]

#675272

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]

#879757

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

[Author]

Posts