Logo and menu overlap when browser window is at a certain size

Hi Rikardm

Good news and bad(for me) news. Your CSS worked great for the main (English) page.

I am, however, using Menu Swapper for the Portuguese and Spanish pages. This plugin requires that I set up two additional menu locations: mswp_portuguese_mm & mswp_spainsh_mm respectively.

Since these language pages aren’t using the Enfold Main Menu, this CSS isn’t working on either of those pages.

Is there a way to modify the CSS you gave me so that it also covers the two new menu locations I’ve created?

Thanks!

Jeff

I’m sorry, Rikard, I don’t understand.

I have implemented these different language versions as pages on the same website. There is a ‘Home – English’ page, a ‘Home – Portuguese’ page, and a ‘Home – Spanish’ page.

The only place I could find a Quick CSS box is on the ENFOLD theme options – which I assume affects all pages in the theme. Are you suggesting that there is a place for me to put in Quick CSS for a specific page (instead of as a theme option)?

If so, I’d love to give that a try. Where can I find it?

Thanks!

Jeff

Hi Rikard!

So here’s what I found out: apparently the function of the Code Block is to display code or CSS on the webpage as content instead of as something that executes. So the Code Block didn’t work for me.

After trying half a dozen other techniques and plugins, here’s what I came up with:

You gave me the following CSS:

@media only screen and (max-width: 1200px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important;}
}

This only worked on the English page. The Portuguese and Spanish pages were still letting the main menu overlap into the logo. So I tried a few changes to the CSS you gave me and came up with this:

@media only screen and (max-width: 1300px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important;}
}

Notice the 1300px (your original was 1200px). This now works for all three pages – English, Portuguese and Spanish.

However, there is one slight issue – the English menu collapses to the 3 lines (don’t know what else to call it) menu VERY early, not as it starts to bump against the logo.

So here’s my question – is it possible for us to come up with some kind of page-specific CSS using the page IDs? For instance, for the English page:

.page-id-17 @media only screen and (max-width: 1200px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important;}
}

And for the Portuguese and Spanish pages:

.page-id-472 .page-id-451 @media only screen and (max-width: 1300px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important;}
}

I know it’s possible to qualify CSS by page ID, but I do not know how to do it within the context of the CSS you gave me. I don’t know how to specify it and I don’t know the order in which it needs to be displayed so that they both are active and don’t overwrite each other’s functionality.

Thanks for you patience on this, Rikard. I’m sure it’s a pain, but I’m really close to getting the effect I want.

Jeff

WOW! Excellent! The menu behavior is exactly what I want. Thanks so much, Rikard! This is perfect.

Please close this one out.

Thank again.

Jeff