RWDHTMLCSS.COM

How to do a horizontal Navigation Menu

Demonstration.

First, I will walk through one on this page. Then on the next page, do the menu to use on our page.
This shows you how you turn these 5 links into the menu below. I thought I would throw this in on how to construct a menu and you are welcome to use this one instead of the next one.

The HTML

<div class="navbar">
<a href="http://hyperlinks.com">Home</a>
<a href="http://hyperlinks.com">Home</a>
<a href="http://hyperlinks.com">Home</a>
<a href="http://hyperlinks.com">Home</a>
<a href="http://hyperlinks.com">Home</a>
</div>

The CSS explained

• To make the div(box as a whole) have white borders and apply box-sizing:border-box. This is the box that the 5 links are in;
  .navbar {
  box-sizing:border-box;
  border:solid white 5px;
  }
  
  
• To make links in the navbar a block element. .navbar a {} refers to the <a href="http://hyperlinks.com">Home</a> elements in the navbar:
  .navbar a {
  display:block;
  }
  
  
• To style the size of the block element:
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  }
  
  A 20% width should make 5 links line up evenly across the page. 20% will line up 5 boxes on a 100% wide area.
  
  
• To float the block elements left so they line up horizontally across the page like on a nav menu:
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  }
  
  Don't forget to use clear:left; on the next block that should be under the blocks floating left. float:left; makes the blocks flow more like text and everything will keep floating until you tell it to stop.
  
  
• To add a background-color and font color: (don't forget the styling you are doing to link states above. The color here will style any text that is not a link while the links will be blue unless you state a color on the link states.)
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  }
  
  
• To add box-sizing:border-box; to keep the padding, borders and margins within the dimensions of the box:
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  box-sizing:border-box;
  }
  
  
• To change the font-family (font type):
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  box-sizing:border-box;
  font-family:georgia, times new roman, Verdana;
  }
  
  
• To change font-size and center align the text:
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  box-sizing:border-box;
  font-family:georgia, times new roman, Verdana;
  font-size:1.5rem;
  text-align:center;
  }
  
  
• To add a 1px white border to the <a> elements:
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  box-sizing:border-box;
  font-family:georgia, times new roman, Verdana;
  font-size:1.5rem;
  text-align:center;
  border:solid 1px white;
  }
  
  
• To add the 4 link states under the .navbar a code. This is also the finished CSS:
  
  .navbar {
  box-sizing:border-box;
  border:solid white 5px;
  }
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  box-sizing:border-box;
  font-family:georgia, times new roman, Verdana;
  font-size:1.5rem;
  text-align:center;
  border:solid 1px white;
  }
  
  .navbar a:link {
         color:white;
         text-decoration:none;
         outline: none;
  }
  .navbar a:visited {
         color:white;
         text-decoration:none;
         outline: none;
  }
  .navbar a:hover {
         color:white;
         font-weight:bold;
         text-decoration:underline;
         outline: none;
  }
  .navbar a:active {
         color:red;
         text-decoration:none;
         outline: none;
  }


• Also, for this menu remove the border around the header section on the css sheet.
  Tested it, Here it is

• Remove the two instances of this from the Html sheet including the links.
  <div class="navbar">
  </div>


• Remove the borders from the header on the CSS sheet. Remove this:
  border:solid 5px #4682b4;


• Remove this from the Css sheet including formatting that is inbetween the curly braces.
  .navbar {
  }
  


• Enter this Html on the Html sheet inbetween the closing </header> tag and opening <article> tag.

<div class="navbar">
<a href="http://hyperlinks.com" >Home</a>
<a href="http://hyperlinks.com" >Home</a>
<a href="http://hyperlinks.com" >Home</a>
<a href="http://hyperlinks.com" >Home</a>
<a href="http://hyperlinks.com" >Home</a>
</div>

• Enter this Css on the main Css sheet:
  .navbar {
  box-sizing:border-box;
  border:solid white 5px;
  }
  .navbar a {
  display:block;
  width:20%;
  height:40px;
  float:left;
  background-color:#4682b4;
  color:white;
  box-sizing:border-box;
  font-family:georgia, times new roman, Verdana;
  font-size:1.5rem;
  text-align:center;
  border:solid 1px white;
  }
  .navbar a:link {
         color:white;
         text-decoration:none;
         outline: none;
  }
  .navbar a:visited {
         color:white;
         text-decoration:none;
         outline: none;
  }
  .navbar a:hover {
         color:white;
         font-weight:bold;
         text-decoration:underline;
         outline: none;
  }
  .navbar a:active {
         color:red;
         text-decoration:none;
         outline: none;
  }


• copy one of these two stylings to the the css mobile sheet in place of the styling for other menu.

• Mobile styling 1:
  To reduce the size of the font and height of box on the mobile screen
  
  .navbar a {
  font-size:1rem;
  height:30px;
  }
  
  
• Mobile Styling 2:
  To make the links stack up instead of floating horizontally, use this mobile styling instead of the mobile styling above. See menu below. Collapse browser to see menu stack up. The previous menu farther up on page will not stack up.
  
  .navbar a {
  float:none;
  width:100%;
  font-size:1.5rem;
  height:40px;
  border:solid 1px white;
  }