[Resolved] Difficulties fixing the mobile header

[Fernando]

I see. One thing we can do is to adjust your break points.

In Apperance > Customize > Additional CSS, you have these two codes:

@media (min-width: 768px) {
    .navigation-branding {
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
    }
    .account-icon {
        margin-left: auto;
    }
    .menu-bar-items {
        flex: 1;
    }
    .main-navigation .inside-navigation {
			   border-bottom: 1px solid var(--base);
    }
}

@media (min-width: 768px) {
    div#primary-menu {
        display:none;
    }
}

They both have a media query set to min-width: 768px. Can you try making them 769 px.

Then, add this CSS:

@media (min-width: 769px) {
    .gb-container.gb-container-ea32e238 {
        display:none !important;
    }
    .gb-container.gb-container-82161030.account-button {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .gb-container.gb-container-ea32e238 {
        display: block !important;
    }
    .gb-container.gb-container-82161030.account-button {
        display: none !important;
    }
}

Kindly let us know how it goes.

[Leonardo]

Fernando, this seems to have solved the problem for the integers. I’m saying this because both on 768 and 769 the bug no longer appears.

However (and apparently), when I’m somewhere between 768 and 769 (maybe decimals?) this appears:

http://formuladiecast.leonardomarioto.com/wp-content/uploads/2022/06/Sem-titulo.png

Very crazy, lol…

[Fernando]

That’s odd. What browser and device are you using? Pixels usually just rounds up to the nearest ones, that is, it’s just either 768 or 769, nothing in between.

Does this also occur when using a different device? I can’t seem to replicate it from my end.

Hope to hear from you soon.

[Author]

Posts