[Resolved] Mobile header with text

[Nacho]

Hello Tom, David and Leo,

I’ve been trying to get a mobile menu so that you can have the logo top left and the phone number top right and the menu button below those centered like when you don’t have the mobile menu active and you see it in your phone.

To make more sense I’m trying to get a mobile header like the one in the url of this post.

Thanks a lot guys.

[Leo]

Hi there,

Any chance you can link us to the site in question?

I need to see what you currently have to provide some suggestions on how to achieve that layout.

You can edit the original topic and use the private URL field.

Let me know 🙂

[Nacho]

Good morning Leo,

Sure, I’ve just put the url in the topic so you can see it.

Right now I don’t have the mobile menu active since I thought that maybe the customization could come from other part.

Let me know.

Thanks.

[Nacho]

Hello Leo,

I was also wondering if you guys recommend using already Gutenberg with GP.

Thanks a lot Leo.

[David]

Hi there,

could you provide the link to the site you want to match, just in a new reply, so we have both URLs to review.

We like Gutenberg, it’s not up to the standards of a pagebuilder but is great for creating posts. I would give it a try to see how you get on. As a note: Install the Gutenberg Plugin as this will bring the Editor up to the latest version with the add-ons and bug fixes.

[Nacho]

Hello David,

Yes, here is the URL of the site https://cca.com

What do you mean by “Install Gutenberg Plugin”? Install first the Gutenberg Plugin and then update to the latest version of WordPress? or GP has a plugin?

Thanks a lot.

[Leo]

What if we add this with your current layout?

@media (max-width: 768px) {
    .inside-header {
        display: flex;
        flex-direction: row-reverse;
    }
}

This is the plugin David mentioned:
https://wordpress.org/plugins/gutenberg/

[Nacho]

Hello Leo,

It works but when seeing it on mobile the topbar lost the space on top and below the logo there is a lot of space. Is that fixable?

Oh yes, I know that plugin. I was wondering if what he told me is that I had to install that plugin before upgrading to WordPress 5.

Thanks a lot Leo.

[Leo]

It works but when seeing it on mobile the topbar lost the space on top

I’m not sure what you mean? The CSS provided shouldn’t change the top bar at all. It is also coming from Elementor.

As for the space below the logo, try this CSS:

@media (max-width: 768px) {
    .header-widget {
        margin-bottom: 0 !important;
    }
}

You can also reduce the header padding on mobile:
https://docs.generatepress.com/article/header-padding/

[Nacho]

Hi Leo,

The topbar thing was my mistake since I have something set in the customizer for that.

The logo thing works perfect.

Thanks a lot for your help Leo.

Have a nice day.

[Leo]

No problem 🙂

[Author]

Posts