{"id":3073,"date":"2017-07-25T11:26:16","date_gmt":"2017-07-25T16:26:16","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2384"},"modified":"2017-07-25T11:26:16","modified_gmt":"2017-07-25T16:26:16","slug":"create-responsive-navigation-bars-for-desktop-and-mobile-websites","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/create-responsive-navigation-bars-for-desktop-and-mobile-websites\/","title":{"rendered":"Create Responsive Navigation Bars for Desktop and Mobile Websites"},"content":{"rendered":"

With minimalist side design still on the rise, it\u2019s 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.<\/p>\n

Responsive Design<\/h2>\n

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\u2019s design should look good on both desktops and mobile devices.<\/p>\n

If you are new to web design<\/a> and the concept of \u201cresponsive\u201d design seems foreign to you, basically it refers to your designs ability to \u201cflow\u201d 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.<\/p>\n

Navigation Bar Skeleton<\/h2>\n

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.<\/p>\n

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

<ul>\n\n<li><a href=\"#home\">Home<\/a><\/li>\n\n<li><a href=\"#products \">Products<\/a><\/li>\n\n<li><a href=\"#company \">Company<\/a><\/li>\n\n<li><a href=\" #contact \">Contact<\/a><\/li>\n\n<\/ul><\/pre>\n
The best part about this is that you will only need to update the CSS for changes to appear on your menu \u2013 no further tweaking in the HTML body is necessary!<\/p>\n
Formatting the Links List<\/h2>\n
So how do we turn a simple bulleted links list into something like this?<\/p>\n
\"\"<\/a>
\nFirst, 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:<\/p>\n
ul {\n\nlist-style-type: none;\n\nmargin: 0;\n\npadding: 0;\n\n}<\/pre>\n
This code will work for both vertical and horizontal navigation bars.<\/p>\n
Formatting into a Vertical Navigation Bar<\/h2>\n
We will now further modify the above CSS so that the <a> element will also have a customized style:<\/p>\n
li a {\n\ndisplay: block;\n\nwidth: 60px;\n\n}<\/pre>\n
display: block;<\/strong>\u00a0turns 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.<\/p>\n
Formatting Into a Horizontal Navigation Bar<\/h2>\n
There are two ways to modify the basic CSS to create a horizontal navigation bar \u2013 either inline<\/strong> or floating<\/strong>.<\/p>\n
Inline Horizontal Nav Bar<\/h3>\n
When you edit the <li> element\u2019s 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.<\/p>\n
li {\n\ndisplay: inline;\n\n}<\/pre>\n
Floating Horizontal Nav Bar<\/h3>\n
The second method of creating a horizontal navigation bar is to make the elements float:<\/p>\n
li {\n\nfloat: left;\n\n}\n\n\u00a0\n\na {\n\ndisplay: block;\n\npadding: 8px;\n\nbackground-color: #dddddd;\n\n}<\/pre>\n
Using float, the individual block elements or list items will slide next to each other.<\/p>\n
Specifying the \u201cActive\u201d Link<\/h2>\n
You can use a nifty CSS trick so the visitor knows which page on your site they are on:<\/p>\n
.active {\n\nbackground-color: #4CAF50;\n\n}<\/pre>\n
The .active<\/strong> class is now a different color than the rest of the menu when the visitor is on a specific page of your website.<\/p>\n
Fixed Navigation Bar<\/h2>\n
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:<\/p>\n
For fixed top navigation bars, use:<\/em><\/h5>\n
ul {\n\nposition: fixed;\n\ntop: 0;\n\nwidth: 100%;\n\n}<\/pre>\n
For fixed bottom navigation bars, use:<\/em><\/h5>\n
ul {\n\nposition: fixed;\n\nbottom: 0;\n\nwidth: 100%;\n\n}<\/pre>\n
Responsive Navigation Bars<\/h2>\n
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<\/a> as in the codes below.<\/p>\n
\"navbar_responsive_ver\"
\nFor responsive top navigation bars, use:<\/em><\/h5>\n
ul.topnav {\n\nlist-style-type: none;\n\nmargin: 0;\n\npadding: 0;\n\noverflow: hidden;\n\nbackground-color: #333;\n\n}\n\n\u00a0\n\nul.topnav li {float: left;}\n\n\u00a0\n\nul.topnav li a {\n\ndisplay: block;\n\ncolor: white;\n\ntext-align: center;\n\npadding: 14px 16px;\n\ntext-decoration: none;\n\n}\n\n\u00a0\n\nul.topnav li a:hover:not(.active) {background-color: #111;}\n\n\u00a0\n\nul.topnav li a.active {background-color: #4CAF50;}\n\n\u00a0\n\nul.topnav li.right {float: right;}\n\n\u00a0\n\n@media screen and (max-width: 600px){\n\nul.topnav li.right,\n\nul.topnav li {float: none;}\n\n}<\/pre>\n
For responsive side navigation bars, use:<\/em><\/h5>\n
ul.sidenav {\n\nlist-style-type: none;\n\nmargin: 0;\n\npadding: 0;\n\nwidth: 25%;\n\nbackground-color: #f1f1f1;\n\nposition: fixed;\n\nheight: 100%;\n\noverflow: auto;\n\n}\n\n\u00a0\n\nul.sidenav li a {\n\ndisplay: block;\n\ncolor: #000;\n\npadding: 8px 16px;\n\ntext-decoration: none;\n\n}\n\n\u00a0\n\nul.sidenav li a.active {\n\nbackground-color: #4CAF50;\n\ncolor: white;\n\n}\n\n\u00a0\n\nul.sidenav li a:hover:not(.active) {\n\nbackground-color: #555;\n\ncolor: white;\n\n}\n\n\u00a0\n\ndiv.content {\n\nmargin-left: 25%;\n\npadding: 1px 16px;\n\nheight: 1000px;\n\n}\n\n\u00a0\n\n@media screen and (max-width: 900px) {\n\nul.sidenav {\n\nwidth: 100%;\n\nheight: auto;\n\nposition: relative;\n\n}\n\nul.sidenav li a {\n\nfloat: left;\n\npadding: 15px;\n\n}\n\ndiv.content {margin-left: 0;}\n\n}\n\n\u00a0\n\n@media screen and (max-width: 400px) {\n\nul.sidenav li a {\n\ntext-align: center;\n\nfloat: none;\n\n}<\/pre>\n
Conclusion<\/h2>\n
There you have it! Don\u2019t forget to have fun experimenting with colors, borders, and other cool tricks you have learned.<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
With minimalist side design still on the rise, it\u2019s 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 […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2933,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[172,185,192,193,194,195],"tags":[214,306,156,335,336],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3073"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3073"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3073\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2933"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}