[Resolved] Problem in GeneratePress headers Widgets

[jorgcastellano]

Hello, I do not speak English.

I have a problem with GeneratePress headers.
Since the last update my pages created with GeneratePress have failures in the menu when it contains a widget in the header (not in the top bar) the menu is below the logo and the width of the menu is increased, example: https: // www. missuniversespain.org/ or https://brandvillage.es/

I would love it to be as it was before, that the position of the menu is next to the website logo and not below how it is currently, can it be corrected?

Thank you

[David]

Hi there,

this happens on smaller screen devices when there isn’t enough room for the logo and the navigation to fir on one line.

Options:

1. Reduce the size of the logo in Customizer.
2. Increase the Customizer > Layout > Primary Navigation > Mobile Break point so it switches to Mobile at a larger screen size.

[jorgcastellano]

no, it also happens on desktop, detail the two examples that you indicate, the menu is below the logo and you can see a great separation between the widget and the menu. This happened since they were updated because it was not like that before.

Thank you

[David]

Not sure what would have changed on update. Try this CSS:

@media (min-width: 769px) {
    .main-navigation {
        position: relative;
        top: -60px;
    }
}

[jorgcastellano]

Yes, rather than solving it in CSS I would like to contribute that something happened to you, thank you very much, greetings.

[Tom]

Having a tough time picturing this – what did it look like before, exactly? Nothing has changed recently when it comes to the navigation/header widget positions.

Let me know 🙂

[jorgcastellano]

Previously if you place the menu on the right side (float) and the logo on the left side they are aligned and if you add the widgets in the header (not on the top bar) it is positioned just above the menu.

After the latest updates, if you add the widgets the menu is below the logo so that if you modify the width of the logo, the menu bar goes up or down. The page of missuniversespain.org and other websites had not modified it for a while and when the plugin or theme was updated, the menu was affected and became much larger than it was.

[Tom]

Without this CSS, which I’m seeing on your site:

@media (min-width: 768px) {
    .main-navigation {
        position: relative;
        top: -50px;
    }
}

This is what I see: https://www.screencast.com/t/AjleMG1pYTGl

That looks like the default layout in GP.

With the CSS above, it looks broken to me.

[jorgcastellano]

Hello Tom.

CSS:

@media (min-width: 768px) {
    .main-navigation {
        position: relative;
        top: -50px;
    }
}

With CSS (preview)
https://ibb.co/DDbHbWs

Without CSS (preview)
https://ibb.co/VTxW3GJ
Notice that the menu is below the logo

on the top: -50px set the padding-bottom to 0 to make it look nice (.inider-header)

[Tom]

Can you try adding this, instead?:

.site-logo {
    float: left;
}

[jorgcastellano]

Hello Tom.

that if it was the adjustment that he needed, he returned to be as before without me altering anything to make him look good.
Will you take it into account the setting for future releases?

regards

[Tom]

I’ll have to look into when that CSS is necessary.

Thanks!

[Author]

Posts