This puts the navigation bar on top if viewed on a small-screen device. View on your PC and on your smartphone to see how it works.
There are easier ways of changing the style sheet to change in accordance with screen size, but understanding what is being done usually requires ones' being intimately familiar with CSS and webpage design. I believe anyone who writes style sheets and HTML code can understand the CSS for this page.
This list can be placed inside a navigation section. Padding of list items can be increased or decreased as needed to keep items from infringing on one another or to admit additional items on the bar.
Although line (<li>) should be closed, the element will almost always work without the line closing (</li>).
A list with or without links or images can be used anywhere in a webpage. This one would be typical for using as part of the text or in a vertical navigation section.