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

[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 🙂

[Tom]

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 🙂

[Author]

Posts