Responsive Navigation Bar W3school

HTML & CSS
1

Is anyone familiar with the Responsive Navigation Bar example on W3school.com? It is a great option however you are limited to the number of options/link on the navigation bar. Does any know how to have a dropdown box on a desktop, where it turns into a continues list for a mobile device using:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

If there are other methods I’ll certainly listen. Thank you in advance for your time!

2

I may have missed it but I don’t see where it says you are limited in the number of links.

I’m not convinced that a series of anchors is the way to do a menu without some structure behind it, say, an unordered list or simple divs.

1 Like
3

I would certainly agree adding order to the bar. The example from W3school is most probably the very basic which is why it just uses anchors. The nice thing about it is the way the responsive bar acts, so I just need to figure out how to add in structure for the bar to order its self when the screen gets smaller.
You are correct the number of links are not limited, the screen(website width) only fits X amount of buttons on the navigation bar before going to a 2nd line, which is why I am looking into being able to structure the bar for drop down options.

4

Perhaps this pen might give you some more ideas…

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.