Horizontal menu changing to vertical

spooky69
(@spooky69)

5 years, 8 months ago

This was working fine and I am not sure if it is an issue with the updated Themify Ultra theme or what appears to have been an automatic update (?) with your plugin.

I am only using your menu for the main navigation. On mobile devices that are being viewed in portrait orientation I use the normal mobile menu and hide the horizontal navigation bar.

When viewed on a desktop or a mobile device in landscape orientation the mobile menu is hidden and your menu is shown horizontally.

The issue that has arisen is that when the menu is shown in landscape or desktop gets to 1024px the menu suddenly changes to a vertical layout. This does not appear to be the mobile version – it acts as if it has run out of room and has to display vertically.

Any ideas?

The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

Plugin Author megamenu
(@megamenu)

5 years, 8 months ago
Hi spooky,

I suspect it was a theme update has changed some things around.

The row containing the menu has a ‘hide-tablet’ class on it, so the whole row should be hidden below 1024px. To fix that, go to Mega Menu > Menu Themes > Custom Styling and add the following:
```
#mega-menu-wrap-main-nav #mega-menu-main-nav {
    visibility: inherit;
}
```
You’re then left with a problem that between 1024px and 940px, no menu is displayed at all. For that you’d need to look through your theme options and change the breakpoint from 940px to 1024px.

Regards,
Tom
Thread Starter spooky69
(@spooky69)

5 years, 8 months ago

Thanks for the prompt response.

That stops the horizontal navigation showing on my phone in landscape orientation, whereas it was showing before.

I’d like to have it working as it was before – navigation showing in line horizontally in landscape on my phone or on a tablet and it disappears in portrait.

Incidentally, the entire row disappeared in portrait previously, whereas this css addition hides the menu but leaves the row.

Do you have any more ideas?

Plugin Author megamenu
(@megamenu)

5 years, 8 months ago

Hi spooky,

From what you’re describing, it sounds like your theme has changed the widths it considers to be a tablet and mobile. It’s not something we’ve changed during an update. The menu disappears at 1024px because the row containing it has a ‘hide-tablet’ class on it (something your theme adds, not us).

You’re then left with a problem that between 1024px and 940px, no menu is displayed at all (again that is your theme that determines the point at which its mobile toggle shows up). For that you’d need to look through your theme options and change the mobile breakpoint from 940px to 1024px. Or change the tablet breakpoint from 1024px to 940px.

Regards,
Tom

Thread Starter spooky69
(@spooky69)

5 years, 8 months ago

That’s the odd thing – 1024 is not set anywhere in the theme settings. There are settings for various breakpoints and none of them are 1024 (or even particularly close).

The only mention of 1024 that I can find is in my custom header, where the normal system mobile menu is set for that breakpoint, but it does not show at that breakpoint and instead only shows where the theme settings dictate (theme settings override this). The system mobile menu is in a different section of the custom header to the main navigation menu – main nav at the bottom of the header and full width, system mobile menu in the top-right of the custom header.

Something in the recent theme update seems to have broken this as it was working perfectly before. I’ll have a play around with changing various settings and see what happens.

Plugin Author megamenu
(@megamenu)

5 years, 8 months ago

Hi Spooky,

If it helps, here is where your theme is setting the hide-tablet breakpoint to 1024px:

This is the row that contains the menu.

Regards,
Tom

hansvaessen
(@hansvaessen)

5 years, 8 months ago

Since yesterday I have the same problem with the hueman pro thema… Totally in the dark here…

Thread Starter spooky69
(@spooky69)

5 years, 8 months ago

Thanks for that.

The theme settings for breakpoints are:

Mobile: 680 (makes sense as the minimum in that code for tablet is 681).

Tablet: 768

Tablet Landscape: 1280

I couldn’t see the @media bit in my code inspector. Would you be able to let me know exactly which css file that was?

Plugin Author megamenu
(@megamenu)

5 years, 8 months ago

It’s here:

https://skillclear.co.uk/wp-content/uploads/themify-css/concate/themify-concate-df22b939e586b0d683415f23736f4387.min.css

If you inspect the row, reduce your browser size until the row disappears, you’ll find it in the CSS bit of dev tools.

Regards,
Tom

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Horizontal menu changing to vertical’ is closed to new replies.