Create Responsive Navigation Bars for Desktop and Mobile Websites

Published July 25, 2017 by saurav.roy.

With minimalist side design still on the rise, it’s sometimes easy for website visitors to get confused. Navigating a website should be easy and intuitive, and is one of the most important elements of a website. Using CSS, you can turn simple HTML menus into dynamic and aesthetically pleasing navigation bars.

Responsive Design

As the majority of people today use their mobile gadgets like cellphones and tablets to go online, it also goes without saying that your site’s design should look good on both desktops and mobile devices.

If you are new to web design and the concept of “responsive” design seems foreign to you, basically it refers to your designs ability to “flow” as you resize the screen or move to a device with a smaller width. Responsive design is built to work on both big and small screens, and this includes the navigation or menu bar visitors use to access other pages of your site.

Navigation Bar Skeleton

Just like many of our tutorials, you will have to combine HTML knowledge with CSS techniques to successfully build and design interesting websites. A navigation bar, in this case, will need a basic HTML skeleton that lists the different links you want to list.

Remember the unordered list <ul> and list item <li> HTML tags? We will use that as the skeleton.

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#products ">Products</a></li>

<li><a href="#company ">Company</a></li>

<li><a href=" #contact ">Contact</a></li>

</ul>

The best part about this is that you will only need to update the CSS for changes to appear on your menu – no further tweaking in the HTML body is necessary!

Formatting the Links List

So how do we turn a simple bulleted links list into something like this?


First, using CSS (which we will either enter between the <style> tags in the <head> or in an external CSS file), we can remove the bullets and margins/padding that automatically formats a list by default:

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

This code will work for both vertical and horizontal navigation bars.

Formatting into a Vertical Navigation Bar

We will now further modify the above CSS so that the <a> element will also have a customized style:

li a {

display: block;

width: 60px;

}

display: block; turns the links into block-type elements, making the entire block area clickable instead of just the text. Above, we modified only the width, but you can also modify other elements such as margin, height, padding, colors, and many other aspects.

Formatting Into a Horizontal Navigation Bar

There are two ways to modify the basic CSS to create a horizontal navigation bar – either inline or floating.

Inline Horizontal Nav Bar

When you edit the <li> element’s CSS style as in this example, you are telling the browser to get rid of the line breaks that format each list item, so they display horizontally in one line.

li {

display: inline;

}

Floating Horizontal Nav Bar

The second method of creating a horizontal navigation bar is to make the elements float:

li {

float: left;

}

 

a {

display: block;

padding: 8px;

background-color: #dddddd;

}

Using float, the individual block elements or list items will slide next to each other.

Specifying the “Active” Link

You can use a nifty CSS trick so the visitor knows which page on your site they are on:

.active {

background-color: #4CAF50;

}

The .active class is now a different color than the rest of the menu when the visitor is on a specific page of your website.

Fixed Navigation Bar

You can make the nav bar stay on the top or bottom of your page, even when the visitor scrolls the page, using one of the following codes:

For fixed top navigation bars, use:
ul {

position: fixed;

top: 0;

width: 100%;

}
For fixed bottom navigation bars, use:
ul {

position: fixed;

bottom: 0;

width: 100%;

}

Responsive Navigation Bars

You can use CSS media queries so your top or side navigation bars will become responsive and would work on mobile devices like a tablet or cellphone. Just specify the widths and heights as in the codes below.

navbar_responsive_ver
For responsive top navigation bars, use:
ul.topnav {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

}

 

ul.topnav li {float: left;}

 

ul.topnav li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

 

ul.topnav li a:hover:not(.active) {background-color: #111;}

 

ul.topnav li a.active {background-color: #4CAF50;}

 

ul.topnav li.right {float: right;}

 

@media screen and (max-width: 600px){

ul.topnav li.right,

ul.topnav li {float: none;}

}
For responsive side navigation bars, use:
ul.sidenav {

list-style-type: none;

margin: 0;

padding: 0;

width: 25%;

background-color: #f1f1f1;

position: fixed;

height: 100%;

overflow: auto;

}

 

ul.sidenav li a {

display: block;

color: #000;

padding: 8px 16px;

text-decoration: none;

}

 

ul.sidenav li a.active {

background-color: #4CAF50;

color: white;

}

 

ul.sidenav li a:hover:not(.active) {

background-color: #555;

color: white;

}

 

div.content {

margin-left: 25%;

padding: 1px 16px;

height: 1000px;

}

 

@media screen and (max-width: 900px) {

ul.sidenav {

width: 100%;

height: auto;

position: relative;

}

ul.sidenav li a {

float: left;

padding: 15px;

}

div.content {margin-left: 0;}

}

 

@media screen and (max-width: 400px) {

ul.sidenav li a {

text-align: center;

float: none;

}

Conclusion

There you have it! Don’t forget to have fun experimenting with colors, borders, and other cool tricks you have learned.

Share and Enjoy !

0Shares
0 0

Sizing Images Responsively

Published January 31, 2014 by saurav.roy.

Images are sort of a special beast in the HTML animal kingdom. They’re technically inline elements, but they don’t really behave like them. For example, inline elements can’t have widths and heights applied. And yet, you and I both know that images have widths and heights.

This can cause trouble in responsive web designs. While inline elements automatically play nicely in RWD, resizing to fill their container, images do not. They’ll bust right out of that shiz and wreak all sorts of havoc, turning your nice narrow sidebar into something like this:

See the Pen Sizing Images Responsively 1 by Rob Glazebrook (@rglazebrook) on CodePen.

That is likely not what you intended. Happily, the fix is simple, safe, and effective. Read On…

Share and Enjoy !

0Shares
0 0

Embedding Video in a Responsive Site

Published January 23, 2014 by saurav.roy.

We live in the future, and one of the benefits of our brave new world is the thousands of cat videos that are just a click away. Let’s say you’ve just found the perfect felicitous feline video to share with all your friends. You post it to your fancy responsive website quick as a flash (because it’s the future and we can do that), but whoops: the video doesn’t fit! It’s too wide, too narrow, or just awkwardly sized.

Let’s fix that.

First off, we’ll need some sort of a wrapper container for our video. We’ll paste our embed code inside this wrapper. It’ll look something like this:

This wrapper will become our responsive container, adjusting to the size of its parent and allowing us to resize the contents within it. Read On…

Share and Enjoy !

0Shares
0 0