Mobile & Tablet burger menu differences

Bug Reports
1

Hey,

I’m not sure if this was intentionally done as a design choice, but if you open the burger menu on mobile the Sign In/User menu option shows in first position.

If you browse in a tablet screen size, the Sign In/User menu option drops to being shown as last place in the menu.

Is there an easy way to make them both the same for consistency?

Cheers,
Chris :victory_hand:

5

Hi,

Thanks for reporting this.

As a temporary solution, please try this CSS snippet:

@media (max-width: 768px) {
    .menu-item--first.menu-item--user-login {
        display: none !important;
    }
    
    .menu-item--last.menu-item--user-login {
        display: block !important;
    }
}

Hope this helps

6

Hi @kseniia,

No worries, and thanks for the snippet!

Unfortunately, it didn’t seem to work on my end, but I had a go with AI and eventually found a solution that seems to work:

.header-navbar__burger > ul[style*="display: block"], 
.header-navbar__burger > ul[style*="display:block"] {
    display: flex !important;
    flex-direction: column;
}

.header-navbar__burger .menu-item--user-login,
.header-navbar__burger .menu-item--user-account {
    order: -1;
}

Edited a few times, but this one seems okay! :slight_smile:

Cheers,
Chris :victory_hand:

1 Like
7

Oh, that’s strange since I tested it on ListingHive. Please see the outcome for the mobile devices and tablets.

But glad there is a solution that worked for you.