[Resolved] Difficulties fixing the mobile header

[Fernando]

For the icons, can you try a setup like this?: https://share.getcloudapp.com/qGuOEpjl

Specifically, the Headline Blocks are just within a Container Block, and both Headline Blocks are set to Inline Width.

Kindly let us know once you’ve done the modification.

[Leonardo]

Fernando, are no longer icons.

I put everything as buttons.

[Fernando]

Yes, that’s alright as well.

However, can you do it as such?: https://share.getcloudapp.com/geuRbl0Y

This way, without them being separated through Grid columns, they’ll be easier to format and move together.

Hope this clarifies!

[Leonardo]

However, I still don’t know how to arrange the arrangement of things for mobile…

[Leonardo]

Do you want me to remove both grid and container buttons?

[Leonardo]

I Tried to do. See if that’s what you’re asking for…

[Fernando]

Great! It’s all good now.

Can you try adding this CSS in Appearance > Customize > Additional CSS?:

@media (max-width: 768px) {
    .site-logo {
        width: 180px;
        position: absolute;
        top: 42%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    nav#mobile-menu-control-wrapper {
        order: -1;
        margin-left: unset;
    }

    .has-inline-mobile-toggle .header-widget {
        flex-basis: unset;
        margin: unset;
    }

    .site-header > .inside-header.grid-container {
        justify-content: space-between;
        flex-wrap: nowrap;
        position: relative;
    }

    .site-header > .inside-header.grid-container .gb-button-wrapper {
        flex-wrap: nowrap;
    }
}

Kindly let us know how it goes.

[Leonardo]

Amazing!!!!!!!!!!!! Incredible!!!!!!!!!!!!!!!!

Can I take these parameters (css, inclusive) for my new projects?!

I’ll just adjust the size of the logo…

One last thing: how do I make the text “My account” (desktop and tablet) in line, and not one under the other as it is now…

[Fernando]

Yes, you can use it if you have the same format.

You can alter 180px in the code to alter to logo size.

With regards to the account button wrapping, kindly add account-button to the class list of that specific Button Block, then add this CSS:

.account-button span.gb-button-text {
    white-space: nowrap;
}

Hope this helps!

[Leonardo]

Fernando, I’m going to take the opportunity and cast one last doubt, in fact, lol…

There’s a point on the screen, when exactly it’s going to transition from the tablet to the mobile where several things bug, see in the image: http://formuladiecast.leonardomarioto.com/wp-content/uploads/2022/06/bug-1.png

The ones I painted yellow are set so they don’t appear on mobile. They don’t appear at all, however, only on this exact screen size I sent, they appear all together.

Is this normal to happen? I’ve seen some sites like this, but I don’t really like the effect, however minimal it may be…

[Fernando]

It usually occurs when the responsive breakpoints are set differently. However, they can be fixed. What specific view is that – what’s the dimensions? I can’t seem to replicate it from my end: https://share.getcloudapp.com/NQulwzYp

Can you try clearing your browser’s cache or try using a different browser?

Kindly let us know.

[Leonardo]

The point where it crashes is exactly at 768 X any number vertically

[Fernando]

What’s your mobile menu breakpoint in Appearance > Customize > Layout > Navigation?

Can you try resetting it?: https://share.getcloudapp.com/E0uyY70W

Kindly let us know how it goes.

[Leonardo]

It’s set to 768, but it’s still the point that gives the problem.

[Leonardo]

Other places do the same thing. Just look at this image: http://formuladiecast.leonardomarioto.com/wp-content/uploads/2022/06/others.png

The top container is to appear on desktop and tablet only; already, the one below, only on the cell phone. This happens correctly, but at the exact point of 768 both appear.

[Author]

Posts