Archived topic

Optimizing Menu for Tablets

3 replies · Started by Milos on February 20, 2021

Viewing posts 1–4 of 4

February 20, 2021 at 12:34 pm #1665982

Good afternoon,

I just realized that the menu/header I have gets pretty wonky in the tablet middle space between mobile and desktop. I've posted a link to the site, you can test it out by making the browser window bigger/smaller.

I think making it act similar to Generatepress.com implementation seems to be great, in just making the menu go below the header (I would want to keep displaying the phone number as well though like I do on destkop). I've attached a screenshot.

Thank you

February 20, 2021 at 3:20 pm #1666055

Hi there,

Can you do this first so I can have a cleaner look at the custom code already added?
https://www.screencast.com/t/vfF5qrgR0

February 23, 2021 at 6:19 pm #1670011

Hi there, didn't see the reply for some reason, sorry about that.

I've disabled the caching plugins.

Thanks

February 23, 2021 at 7:28 pm #1670051

Hi there,

The issue here doesn't exactly occur on tablets only as the "wonky" look starts at around 1140px viewport width which is still in desktop breakpoint. (desktop breakpoint starts at 1025px, tablet at 1024px - 769px)

If I may suggest, change this CSS on your Additional CSS:

@media (min-width: 769px) {
    body.nav-float-right #site-navigation {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    body.nav-float-right .header-widget {
        margin-left: auto;
    }
}

To this:

@media (min-width: 1141px) {
    body.nav-float-right #site-navigation {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    body.nav-float-right .header-widget {
        margin-left: auto;
    }
}

@media (min-width: 769px) and (max-width:1140px) {
    body.nav-float-right #site-navigation {
        position: relative;
    	flex: 1 1 100%;
    	display: flex;
    	order: 3;
    	width: auto;
    	margin: 0 auto;
    }
    .site-header .inside-header {
        flex-wrap: wrap;
    }   
    body.nav-float-right .header-widget {
        margin-left: auto;
    }
}

After changing, this is how your menu would behave: https://share.getcloudapp.com/YEuXWGw4

This archived topic is closed to new replies.

Start building better websites today.