[Resolved] Disable secondary nav on a mobile/small screen

[David]

Hi

Wondering if its possible to disable the secondary nav on a mobile/small screen?

Main reason is i don’t like the look of the secondary nav on a mobile, but fits nicely under the main menu on the desktop view 🙂

Thanks as always

[Tom]

For sure, give this CSS a try:

@media (max-width:768px) {
    .secondary-navigation {
        display: none;
    }
}

• This reply was modified 10 years, 1 month ago by Tom.

[David]

Hi.

That has removed secondary nav from desktop and mobile view, how can i have it turned on the desktop view but still off on the mobile?

[Tom]

Need more coffee. Just adjusted the code above 🙂

[David]

Thanks Tom

Go treat yourself to more coffee 🙂

[Tom]

You’re welcome 🙂

[David]

Another question..

at 768px the menu changes from mobile view to desktop view, how could i get this to change at say 600px

Also i’m using menu-plus for the mobile menu, on a mobile the menu/text is centered and thus gets hidden when the menu is expanded, is there a way to align this to the right? but still for the actual menu to remain on the left?

And i’ve just noticed on my mobile when i scroll down the logo/header image pops out, ideas?

[Tom]

It’s possible, but requires quite a lot of CSS. Any reason for this?

The “official” breakpoint for tablet vs mobile is 768px – it’s a common value found across the web.

Not sure what you mean by your second question – can I see an example?

[David]

Hi Tom

2nd question – GP menu plus
If I add a image, like you’ve add GP icon/logo to this site the that logo is on the left and the menu is on the right. Where with NO logo the menu is in the center and it’s this that gets covered when the menu is expanded. I was just going to add an icon (blank/background colour) as at present I don’t have a suitable one.

3rd question about the logo popout I have fixed

[Tom]

The Menu part should be centered when there’s no logo, as it would be weird with a blank space on the left and the menu text on the right.

However, nothing should get covered when the menu expands. Any chance you can show me?

[Tom]

If you want to align the menu text to the right, try this CSS:

@media (max-width: 768px) {
    .menu-toggle {
        text-align: right;
    }
}

[Author]

Posts