From the course: Building a Responsive Single-Page Design with PostCSS

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Make a navigation responsive

Make a navigation responsive

From the course: Building a Responsive Single-Page Design with PostCSS

Start my 1-month free trial

Make a navigation responsive

- So, let's go ahead and finish off our navigation by making it responsive. Now, before I do that, I need to fix a minor issue with my navigation bar. Now notice that it isn't quite spreading to the end of the container when this layout is very wide. So, you can see that if I make this sort of bigger, this doesn't quite align to the container, which is over here. That's because I got a little bit trigger happy here, and in my navigation CSS file I gave this nav bar a width of 70%, so this really needs to be 100%, not 1000% that's 100%, and then it will go to the edge a little bit better. Now we do need to put in a width of 30% on the branding, and that's because the image here doesn't really have any sort of width, so if we don't put this in you'll see that it just gets super tiny. You could give it a minimum width, but by giving it a width of 30% then it's at least going to at least be a certain size which makes it visible on screen, and it looks relatively nice. So let's go ahead…

Contents