How To Make Navigation Bar Stretch Across The Page

Hello Guys!

Today is Wednesday, the day to do and learn something new from your routine work. So lets learn some new CSS and HTML tricks to create a navigation menu which will take the width of its parent container and distribute it in number of links. And as a bonus I will tell you how to create its sub-menu with a pointer with minimal DOM elements.

First of all lets see what we are going to create :

What if we add some menu items:

This is what we call a stretched navbar, in which menu items take the space accordingly. There is no fixed/% width for them. It works like table and td structure, where td takes full width of table.

So lets make it:

First of all our HTML:

Now CSS :

Now lets add 3 more links in it, so HTML Structure will now:

Now lets make all other widths equal, change the CSS lines as below :

Result:

Notes:

1.
1.1. Global Definition
1.2. Global Definition for Main menu all uls and links. (In case of Sub-menu it will be applied on that sub-menu also)
1.3. Using display:block, so it will cover entire area of li and whole li will be clickable.
2.
2.1. I am using ‘>'(Direct Child) here so if we define any sub-menu inside, this CSS will not work on that.
2.2. ‘Width’ property is necessary with ‘display:table’. Because default width of display:table is ‘Auto’ means as per the inside content.
3.
3.1.Display:table-cell, divides the total width / remaining width(the un-divided width. In our case it is 100%-40%=60%) equally. It always need display:table on its parent container.
3.2. I am using border-right for showing links separately and removing extra border on last-child in the next line.
4. How width is distributed, if we define it explicitly:
4.1. If width is more than the average width(100% / No. of links) then it will give that width to first link and then from remaining if possible then to second link and then rest to other link and if no width left then to rest of the links as per content (with text wrapping as default) and remaining width in proportion as we provided.
Example: we have 4 links and we define 50% width for each. So it will assign 3rd and 4th link as per the content and to 2nd and 1st link remaining width’s 50 %.
4.2. If width is less than the average width, it will distribute the width equally in all links.
4.3. If one link is having some specific width and we want all other links with a particular width (Our Case), It will provide the given width to that link(s) and then remaining width will be divided equally to all links including the specific width link.
5. We provide ‘!important’ here because of ‘order of precedence’. The hierarchical definitions have more weight than the class definitions. And ‘!important’ provides supreme power to class definition so it will be applied. I will discuss on Order of Precedence in my later blog.

So with this article, I have provided a lot of stuff to think and experiment. Have a nice reading and experimenting. 🙂