CODEWITHSUNDEEP
htmlcssresponsive-design
user3399851
user3399851

Reputation: 105

My nav bar isn't responsive at all

I am learning HTML and CSS, and I've made a navbar (see the image below) but it's not responsive at all, Viewing it on my laptop or reducing the size of the browser, it moves out of place.

Could someone please help me and explain why it isn't responsive/sticking to it's original place.

Thanks a lot, you're all great!

EDIT:

I am testing bootstrap because of its responsive functionality, but I've never used it before. How can I place navbar, where the red box?

enter image description here

Upvotes: 2

Views: 248

Answers (1)

Marcin Nabiałek
Marcin Nabiałek

Reputation: 111829

The problem is that you defined fixed parameters for your menus:

#NewNavBar {
    margin-left:208px;
    width:756px;
    height:40px;
}

and

#NewNavB {
position:relative;
margin-left:208px;
margin-bottom:15px;
width:756px;
height:30px;
}

You can remove in this case margin-left but of cours it won't make your navbar responsive. If you want do it responsive you need to use width in % or em and give different styles depending on your breakpoints.

For example on one of my site I use such breakpoints

<link rel="stylesheet" href="stylesheets/small.css" media="all" />
<link rel="stylesheet" href="stylesheets/print.css" media="print" />
<link rel="stylesheet" href="stylesheets/medium.css" media="screen and (min-width: 32em) and (max-width: 64em), projection and (min-width: 32em) and (max-width: 64em), handheld and (min-width: 32em) and (max-width: 64em)" />
<link rel="stylesheet" href="stylesheets/large.css" media="screen and (min-width: 64.0625em), projection and (min-width: 64.0625em)" />

The easiest thing what you can do is remove margin-left from both and change width:756px; in both to width: 100% however as I said it doesn't mean that your nav will work in all resolutions (in smaller it won't) . Jsfiddle

Upvotes: 3

Related Questions