Before the header put contact, logo and main menu (mobile version)

[Ivan]

Hi,
First of all I have GeneratePress theme 3.0.2 and GeneratePress Premium 1.12.2

How can I do the following before the header in mobile version like this:
1) Contact details
2) Web logo
3) Menu.

I am attaching a screenshot where you can see the example https://www.screencast.com/t/rpLdzrf1r

The example page is the following: https://www.grupovalseco.com (mobile version)

Thank you,
Ivan

[David]

Hi there,

1. You can add the Contact details to the Customizer > Widgets > Top Bar
2. Set the Logo in the Site Identity.
3. In Customizer > Layout > Primary Navigation –> Location to Float Right

Once you have that setup it may require a little CSS to arrange the Mobile layout. Send us a link so i can help with that.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ivan]

Hi,
Yes, I had these steps as you indicate, but I don’t know how to do what I said before 🙂

“Send us a link so I can help with that.” – Are you referring to the web link? is this http://www.emcolimpiezas.es

Is it possible to put a Logo in the Site Identity and another in the menu of the mobile version?

[David]

Ok, yes – keep your setup as is, you can set a different logo in Customizer > Layout > Header –> Mobile header logo. Then add this CSS to stack them:

#mobile-header .navigation-branding, #mobile-header .site-logo.mobile-header-logo {
    flex: 1 0 100%;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
}
/* optional set size of mobile logo */
.site-logo.mobile-header-logo img {
    height: 80px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ivan]

Thanks, David,

With this code it has worked, but the margin is not adjusted correctly.
The right side is missing a bit, and the left side is left over.
In this way with my finger I can go to the right – left on the mobile screen.

How do I remove it?

https://www.screencast.com/t/zvRy0WKuymq

[David]

See my response here:

https://generatepress.com/forums/topic/the-right-margin-of-the-container-does-not-fit-correctly-on-movile-version/#post-1551716

I have also updated the above code to remove the margins.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ivan]

Thanks, with this code it works perfectly 🙂

[David]

Glad to hear that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts