-
Site in questions: https://www.princeedwardnaacp.org
To lower my navigation bar and have it merge with the header I used this CSS I found on the forums:
#primary-menu {
width: 620px;
margin-left: 700px;
margin-right: 0px;
margin-bottom: -150px;
/* Include the next two lines */
position: relative;
z-index: 100;
}I need to use margin-left to keep the menu items from overlapping the color bar and round seal on smaller screens, but that setting prevents the menu from working properly on mobile.
Is there a way to have that CSS apply only to desktop? Please pardon my ignorance. Thanks.
-
Hi there,
Yes.
Wrap the CSS with a media query. Something like this:
@media(min-width: 1025px) { #primary-menu { width: 620px; margin-left: 700px; margin-right: 0px; margin-bottom: -150px; /* Include the next two lines */ position: relative; z-index: 100; } } -
Worked great! Thanks so much!
-
No Problem 🙂
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.