Navigation Bar | with submenus

Hello darlings!

Another online class in web design, iey!

This one has been one of your top requests! In this online class you are going to learn how to create a navigation bar with submenus, just like mine.

If you don't want sub menus on your navigation bar you can learn how to do a simple one in my first online class.

Let's get started?

Let's add css first. To do that you have to go to to TEMPLATE page, click on EDIT HTML. Search for <b:skin></b:skin> and click on the triangle next to it, and put this css code before ]]></b:skin>

Right before that add this code:

/** Lovable Maria Navigation bar **/ #lovablenavigation { width: 100%; background-color: black; /* The background color of your navbar */ top: 0; left: 0; position: fixed; /* You can delete this code if you don't want it to be fixed to the top */ margin: 0; padding: 0; height: 40px; z-index: 3; } .menu ul { margin: -2px auto 0px !important; width: 790px; /* Change this size to fit your layout */ } .menu li { display: inline-block !important; position: relative; width: 100px; margin-right: 1px; text-align: center; } .menu li a { display: inline-block !important; font-size: 11px; color: white; /* Color of the links */ line-height: 48px; text-transform: uppercase; -o-transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; text-decoration: none; } .menu .sub-menu, .menu .children { background-color: black; /** Color of the dropdown menu **/ display: none; padding: 0; position: absolute; left: 0; z-index: 5; border: none !important; width: 100px; margin: 0px auto !important; } .menu .sub-menu li { border: none !important; width: 100px; margin: 0px auto !important; } .menu .sub-menu li a { border: none !important; width: 100px; padding: 0px !important; margin: 0px auto !important; color: white; } ul.menu ul li, .menu ul ul li { margin: 0px auto !important; } ul.menu ul a, .menu ul ul a { color: #FFF; margin: 0 auto; max-width: 100px; line-height: 20px; -o-transition: .25s; -ms-transition: .25s; -moz-transition: .25s; -webkit-transition: .25s; transition: .25s; text-align: center; font-size: 10px; margin: 0px auto !important; } .menu li ul li{ display: inline-block; width: 150px; padding: 5px 0px !important; margin: 0px auto !important; } .menu li:hover ul, .menu li.over ul { display:block; } .menu .sub-menu li:hover { background: #efefef; /** Color when the mouse is over the submenu **/ color: white; } .menu .sub-menu li a:hover { color: white; } /** End Lovable Maria Navigation bar **/

We are almost done, I promised! We just need to add our html code, change some links and we're done!

Now, in the same page, search for  </head>  and put the code bellow AFTER it. Change all the links to yours and the name of your categories, add more submenus or simple buttons and you're done.

Where it says SIMPLE change it to the name of your category that doesn't have submenus and near that you are going to find LINK, and you need to put there the link of that category. Where it says SUBMENU change it to the name of the category that has submenus (this one doesn't have a link, so don't add it). Right bellow SUBMENU you are going to see some words: NAME 1, NAME 2, change it to the names of your labels, and near each word you are going to see the word LINK , just change that word for the link of each label. Easy?

This code was made by me, hope it helps in some way.

<!-- Lovable Maria NAVBAR --> <div id='lovablenavigation'> <div class='menu'> <ul> <li><a href='LINK'>SIMPLE</a></li> <li><a href=''>SUBMENU</a> <ul class='sub-menu'> <li><a href='LINK'>NAME 1</a></li> <li><a href='LINK'>NAME 2</a></li> <li><a href='LINK'>NAME 3</a></li> </ul> </li> <li><a href=''>SUBMENU</a> <ul class='sub-menu'> <li><a href='LINK'>NAME 1</a></li> <li><a href='LINK'>NAME 2</a></li> <li><a href='LINK'>NAME 3</a></li> </ul> </li> <li><a href='LINK'>SIMPLE</a> </li> <li><a href=''>SUBMENU</a> <ul class='sub-menu'> <li><a href='LINK'>NAME 1</a></li> <li><a href='LINK'>NAME 2</a></li> </ul> </li> </ul> </div> </div> <!-- END OF Lovable Maria NAVBAR -->