Mobile Menu Header Size Dawn

[aromabarn]

Hello

I was curious, my mobile layout for my navigation menu is too large for mobile and forces itself to become two rows. How can I install code or steps to decrease the menu font size for this on my website.

The website is aromabarn.com and you can see the navigation menu in the header

[ha_matto]

Hello,

You could set a media query between the problematic device widths to edit the nav item padding and font size and add it to the bottom of your base.css file:

@media only screen and (min-width: 990px) and (max-width: 1130px) {
   .header__menu-item {
      padding: 0.5rem;
      font-size: 1.2rem;
   }
}

Hope that helps!
~ Matt

[johnwilson7969]

Your navigation issue is common on mobile layouts! Adjusting the font size via CSS should help. For inspiration, Check out Sonic Drive-in latest website designed.

[aromabarn]

How can i do this specifically to the mobile lay out and leave the desktop size. Please attach the CSS to adjust this if possible and steps it would really help in this case

[ha_matto]

Add this to the bottom of your base.css file!

@media only screen and (min-width: 990px) and (max-width: 1130px) {
.header__menu-item {
    padding: 0.5rem;
    font-size: 1.2rem;
}
}

[ha_matto]

Try adding this to the bottom of your base.css file.

@media only screen and (min-width: 990px) and (max-width: 1130px) {

   .header__menu-item {
      padding: 0.5rem;
      font-size: 1.2rem;

   }

}

Hope that helps!