Archived topic

Imperfect responsiveness of menus - any solution?

1 reply · Started by Stephanie on December 22, 2016

Viewing posts 1–2 of 2

December 22, 2016 at 4:28 pm #257185

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 :)

December 22, 2016 at 11:02 pm #257219

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 :)

This archived topic is closed to new replies.

Start building better websites today.