[Resolved] Logo and menu-position changed after update

[Antwan]

Hi Tom,

After the last update of my theme and plugins the position of the previously implemented Max Megamenu on http://stadtteilweb.de changed. I tried to fix this through CSS, but it had some unwelcome effects on the responsive layouts. Do you have a tip for me where to look? The menu should be positioned near the top of the screen, you can see the correct view when you scale the window up and/or down. But on the initial page-load, the menu is placed underneath the site-logo.

Thanks in advance!

[Tom]

You have quite of a bit of custom CSS going on.

You should be able to do something like this:

.site-logo {
    width: 10%;
}

.main-navigation {
    width: 80%;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Antwan]

Nope. That doesn’t do the trick, unfortunately. I’ve already tried that one; even when the menu has a much smaller width it does not move up to where it should belong. As if the logo claims all the horizontal space for itself. At least on page load, I can’t figure out why everything fixes itself when resizing the window.

[Tom]

Are you sure? I’ve added it to your site using developer tools and it works.

Can you replace the custom CSS you have with the above and let me know so I can see which part of it isn’t working?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Antwan]

Yep, pretty sure. I’ve tried it several times, even with the addition of !important. When I set the .site-logo to ‘display: none’ the menu displays correctly. So I guess the logo is the culprit, but tweaking the individual attributes of .site-logo doesn’t do the job. I’ve added your suggestion to the custom CSS now, so you can see for yourself. The only thing this does is limit the width of the menu from 90% to 80%, but it doesn’t alter the location in which it is loaded. (Tested on Safari and Chrome.) Thanks again!

[Tom]

You still have the problem CSS added.

This should all be removed:

.site-logo {
    display: inherit !important;
    float: none;
    margin: 0 90% 0 0;
    width: 10%;
}

.main-navigation {
    clear: none;
    display: inherit;
    float: right;
    margin: 0;
    padding: 0;
    width: 90%;
    z-index: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Antwan]

That’s it. Many thanks, you’re the best!

[Tom]

Glad I could help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts