[Support request] Imperfect responsiveness of menus – any solution?

Home Forums Support [Support request] Imperfect responsiveness of menus – any solution?

Home Forums Support Imperfect responsiveness of menus – any solution?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #257185
    Stephanie

    Hi

    The main menu along the top of my new blog displays nicely on full screen, and correctly changes to the responsive/mobile-optimised hamburger menu on very small screens like phones. However, inbetween those sizes, such as small tablet screens, it wraps in rather an unattractive way. See here: http://shrinkwrap.blog/

    Can anything be done to improve this, so it steps down to the hamburger menu at the right time?

    Or better yet, this web site has done some clever adaptations to cater for XL, L, M, S and XS screen sizes, so the menu displays well on any device: https://insightmatters.com/. Could something similar be implemented?

    Thanks ๐Ÿ™‚

    #257219
    Tom
    Lead Developer
    Lead Developer

    Hi Stephanie,

    What I would do is use media queries to reduce the width of your menu items and the font size as the screen resizes.

    For example:

    @media (max-width:1250px) {
        .main-navigation .main-nav ul li a {
            padding-left: 30px;
            padding-right: 30px;
        }
    }
    
    @media (max-width:1130px) {
        .main-navigation .main-nav ul li a {
            padding-left: 20px;
            padding-right: 20px;
        }
    }
    
    @media (max-width:1000px) {
        .main-navigation .main-nav ul li a {
            padding-left: 15px;
            padding-right: 15px;
            font-size: 14px;
        }
    }

    As you can see, we reduce the padding and font size as we resize our browser down.

    Let me know if you need more info ๐Ÿ™‚

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