[Support request] Difficulties fixing the mobile header

Home Forums Support [Support request] Difficulties fixing the mobile header

Home Forums Support Difficulties fixing the mobile header

Viewing 15 posts - 16 through 30 (of 32 total)
  • Author
    Posts
  • #2261861
    Fernando
    Customer Support

    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.

    #2261865
    Leonardo

    Fernando, are no longer icons.

    I put everything as buttons.

    #2261869
    Fernando
    Customer Support

    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!

    #2261870
    Leonardo

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

    #2261873
    Leonardo

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

    #2261875
    Leonardo

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

    #2261878
    Fernando
    Customer Support

    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.

    #2261882
    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…

    #2261887
    Fernando
    Customer Support

    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!

    #2261889
    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…

    #2261890
    Fernando
    Customer Support

    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.

    #2261902
    Leonardo

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

    #2261915
    Fernando
    Customer Support

    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.

    #2262468
    Leonardo

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

    #2262488
    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.

Viewing 15 posts - 16 through 30 (of 32 total)
  • You must be logged in to reply to this topic.