The mobile view of the menu doesn’t include the background color. Can someone help me clean up the CSS for this menu so that it would function and appear properly?
What colour is it supposed to be? I can see it on the ‘Home’ link btw in the Chrome Dev Tools mobile view. Oh, and which element are you expecting it to be defined on.
HI,
It’s because you have a top and bottom position defined which makes the menu too small to contain its content.
Add this:
@media only screen and (max-device-width: 480px) and (min-device-width: 320px){
.navbar{bottom:auto;}
}
There is also an issue in that you have used max-device-width rather than max-width and in doing so you have broken the view for desktops at those smaller screen sizes. Generally you just use max-width (or min-width) and in that way all devices get the styles if their screens match the dimensions you have used.
It is also best to base your media queries on the needs of the design and not on some imaginary device width (there are hundreds of devices now all at different widths).
1 Like
Hi Paul,
Good to hear from you! Your fix suggestion works like a charm! And I have changed “max-device-width” and “min-device-width” to “max-width” and “min-width”. I appreciate your help… once again!
1 Like
Thanks for the response Chris. @PaulOB had a fix that worked well, but I appreciate your help with the mobile menu!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.