Header showing twice at tablet breakpoint

  • Resolved mscsaharan

    (@mscsaharan)


    8 months, 2 weeks ago

    Hey, my issue is similar to this thread and reddit post, header is showing twice at tablet breakpoint when resizing chrome window. It’s showing fine in console though. I have manually set my tablet breakpoint via WPCode plugin.

    add_filter( ‘astra_tablet_breakpoint’, function() {
    return 1060;
    });

    Is this bug or my CSS is messing?

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hi @mscsaharan,

    Refer to this video, please.

    On what real device you are facing this double Header?

    I look forward to hearing from you.

    Kind regards,
    Herman ??

    Thread Starter mscsaharan

    (@mscsaharan)

    Hey Herman, I am not talking about checking in console. The double header is showing when I resizing the chrome window on desktop. Have you tried it?

    • This reply was modified 8 months, 1 week ago by mscsaharan.

    Hi @mscsaharan,

    Yes, I can see the double Header when I resize the browser. Not sure why it happens to your site as it doesn’t on my dev site when I add the same snippet to update the Breakpoints. Refer to this video, please.

    I believe the following CSS can be used as a quick workaround

    @media (max-width: 1075px) { #ast-desktop-header {
    display: none;
    }
}

    Please adjust the value to fit your needs.

    Kind regards,
    Herman ??

    Thread Starter mscsaharan

    (@mscsaharan)

    So basically you want me to show no header between 1060px (tablet breakpoint) to 1075px. How does that work!

    Hi @mscsaharan,

    That CSS code will hide the desktop Header on tablet view. Please don’t forget to adjust the value.

    Is it working for you?

    Kind regards,
    Herman ??

    Thread Starter mscsaharan

    (@mscsaharan)

    The double header shows between around 10-12px, it’s when tablet breakpoint is set, and it stays for some time while i am reducing the window. The problem with your solution is if I hide desktop header at 1075px, or any adjusting value, the tablet header shows at 1060px which I set initially. Now, in that duration, no header is showing in console. It’s fine now when resizing windows.

    I am confused, what’s the real thing people see on their devices, the one which is shown in browser console or the one when resizing browser window.

    Hi @mscsaharan,

    Actually, I asked the same thing in my first response.

    Well, pretty sure the user will not see any issue on their real device.

    Let us know if you need more help, otherwise please mark the topic as Resolved.

    Kind regards,
    Herman ??

    Thread Starter mscsaharan

    (@mscsaharan)

    Well, I take your word on this. Thank you.

    No problem!

    Feel free to start a new thread if there’s anything else related to Astra, we can help you with.

    Kind regards,
    Herman ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Header showing twice at tablet breakpoint’ is closed to new replies.