Create Very Simple Responsive Navigation Bar

Its features:

  • It is completely responsive.

  • When you compress it, the menu displays vertically.

  • You can add a link to the name of each menu.

  • You can change the model color via CSS if you want.

Try to create like yourself by following the codes below :

Step 1) Add to head : <meta name="viewport" content="width=device-width, initial-scale=1">
Step 2) Add to html : <h2>Create Very Simple Responsive Navigation Bar</h2> <ul class="simple"> <li><a href="#abcd">Home</a></li> <li><a href="#abcd">Name01</a></li> <li><a href="#abcd">Name02</a></li> <li><a href="#abcd">Name03</a></li> <li><a href="#abcd">Name04</a></li> </ul>
Step 3) Add to css : ul.simple { padding: 10px 16px; list-style: none; background-color: #dff1d6; border-bottom:1px solid #98fb98; border-top:1px solid #98fb98; } ul.simple li { display: inline; font-size: 18px; } ul.simple li+li:before { padding: 8px; color: black; content: "/\00a0"; } ul.simple li a { color: #144955; text-decoration: none; } ul.simple li a:hover { color: red; text-decoration: underline; }

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.