[Support request] Optimizing Menu for Tablets

Home Forums Support [Support request] Optimizing Menu for Tablets

Home Forums Support Optimizing Menu for Tablets

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1665982
    Milos

    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

    #1666055
    Leo
    Staff
    Customer Support

    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

    #1670011
    Milos

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

    I’ve disabled the caching plugins.

    Thanks

    #1670051
    Elvin
    Staff
    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.