list-style-type: none;
- Removes the bullets. A navigation bar does not need list markersmargin: 0;
and padding: 0;
to remove browser default settingsdisplay: block;
- Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want)width: 60px;
- Block elements take up the full width available by default. We want to specify a 60 pixels widthtext-align:center
to <li> or <a> to center the links.border
property to <ul> add a border around the navbar. If you also want borders inside the navbar, add a border-bottom
to all <li> elements, except for the last one:display: inline;
- By default, <li> elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one linefloat: left;
- use float to get block elements to slide next to each otherdisplay: block;
- Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify padding (and height, width, margins, etc. if you want)padding: 8px;
- Since block elements take up the full width available, they cannot float next to each other. Therefore, specify some padding to make them look goodbackground-color: #dddddd;
- Add a gray background-color to each a elementfloat:right;
):border-right
property to <li> to create link dividers:position: sticky;
to <ul> to create a sticky navbar.top
, right
, bottom
or left
for sticky positioning to work.