CSS Navigation Bar Design and Properties

Navigation Bar Basically Created with the Help of CSS, the created navigation bar can be design two Types:
1. Vertical Navigation Bar
2. Horizontal Navigation Bar
Navigation Bar is most important, for every website, and having easy to use navigation Bar in the website, CSS plays an important role because with CSS we can transform HTML menus into an attractive and good-looking navigation bars.
A Navigation bar is basically a list of link, (Navigation Bar= list of Links)

Vertical Navigation Bar Example

Explanation:

list-style-type: none; used to remove the bullets, because a navigation bar never need list markers.
always you can Set the margin: 0; and padding: 0; to remove browser default settings
when you build a vertical bar, you can style elements inside the list.

display: block; – it property is used to displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width, height, margin, padding, etc. if you want)

Current/ active Navigation link

Add an “active” class to the current link, which you want to current and active link user knows which link want to active

Fixed Full-height Vertical Side Navbar


css vertical navbar

Horizontal Navbar with Dropdown

here Horizontal menubar we learn How to add a dropdown menu inside a navigation bar.



Sticky Navigation

Fixed Navigation Bar (Top)