https://codepen.io/willyblackkeez/pen/GzKKEX

Code Feedback
1

I had been trying to make my nav-bar responsive using media queries but it has not been working. I’ll be delighted if someone could just help point out some things.

2

Hi,

First off, you are trying to nest the mediaquery but I believe that does not work in regular CSS (I have been using a lot of SCSS lately, there you can do that).

#nav-bar{
	height: 40px;
	width: 40%;
	margin-left: 600px;
	padding: 10px 15px;
	padding-top: 3px;
}

@media only screen and (max-width: 650px) {
  #nav-bar{
 margin-top: 10px;
    width: 40%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    background-color: green;
    padding: 0 50px;
  }

This way the media query will work. You do have a margin-left on the nav-bar that will push all content away. Try to not use a margin on the nav-bar element. If you set the width to 100% and make the ul element a flex container you can use justify-content: flex-end; to move your li elements to the right.

Good luck, let me know if you need any more help.

3

#nav-bar{
height: 40px;
width: 40%;
/margin-left: 600px;/
padding: 10px 15px;
padding-top: 3px;
}

@media only screen and (max-width: 650px) {
#nav-bar {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
text-align: center;
background-color: green;
padding: 0 50px;
}
}

Thanks for taking your time to help @steven_kuipers,
I just tried your suggestion but its not working too. like there was no change.
I noticed that when i changed the max- width to min-width, there was a change though.
please what else can you suggest?

4

I just tested it and it works, keep in mind that the media query is only active when the screen width is smaller than 650px though

46
461848×546 89.5 KB

5

Thanks man, I really appreciate the help