I've created my own take on a navigation bar using FlexBox (currently not refined for smaller screen media queries). I would just like someone to go through my code notes and see if I am going about it correctly.
It seems to work but am I doing this inefficiently? Should i be using other methods? Have I aligned using the best procedures etc?
Ignore the fact I haven't used classes please.
*{
margin: 0;
padding: 0;
}
body{
background-color: #FFF;
font-size: 1.2em;
}
header{
display: grid;
grid-template-columns: 20% 60% 20%; /*used to keep the grey bar along the whole of the top, but keep navigation selection area squashed in slightly*/
width: 100%;
background-color: #A6A6A6;
}
nav{
grid-column: 2;
}
nav ul{
display: flex;
min-width: 500px; /*stops list items overlapping when smaller screen - will later include media query to fix*/
margin: auto;
/*do not use 'justify content' this causes gaps between each list item, and i want seamless link to lin kwhen hovering*/
}
nav ul li{
width: 20%; /*width of each flex item is 20% as there are 5 items*/
text-align: center; /*move text to center of individual list item*/
list-style: none;
}
nav ul li a{
display: block; /*devault is set to inline which does not expand the 'link area' to fill the list element*/
color: #FFF;
padding: 20px; /*this padding changes size of parent list item too*/
text-decoration: none;
border-right: solid #FFF 1px;
}
/* border decoration-------------------------------------*/
nav ul li:hover{
background-color: #767676;
}
nav ul li:first-child{
border-left: solid #FFF 1px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<meta name="viewport" content-type="width=device-width initial-scale=1" />
<title>NavBar Examples</title>
</head>
<body>
<header>
<nav class="centered-navigation-bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
</body>
</html>