Navigation / Header Bar

Navigation CSS (Static Colors):

nav{
   position: fixed;
   top: 0;
   width: 100%;
   height: 100px;
   z-index: 1000;  /*just a high random number to make sure it always is on top*/
   background-color: #2f2f2f;  /*Change this value to change the backgournd color*/
}

.navbar-items{
   display: flex;
   justify-content: flex-end;
}

nav a{
   display: block;
   height: 100%;
   background-color: #064789;  /*Change this value to change the backgournd color of the text*/
   color: #FFF;  /*Change this value to change the color of the text*/(want to learn more about this click here)
   text-decoration: none;  /*This removes the underline of the text*/
}

nav h3{
   padding: 38.8px;  /*This makes the text blocks the same height as the navigation bar*/
}

.navbar-sitename{
   float: left;  /*Makes the sitename show on the left site of the navigation bar*/
}



Navigation CSS (Smooth Transition):
To make this work replace "nav a" from the static colors with the CSS code below.

nav a{
   display: block;
   height: 100%;
   color: #FFF;  /*Change this value to change the color of the text*/
   text-decoration: none;
}

nav a:hover{
   background-color: #064789;  /*Change this value to change the backgournd color of the text*/
}



Navigation CSS (Colors on Hover):
To make this work replace "nav a" from the static colors with the CSS code below.

nav a{
   display: block;
   height: 100%;
   color: #FFF;  /*Change this value to change the color of the text*/
   text-decoration: none;
   text-decoration: none;
   transition: all 0.3s ease-in-out;  /*Adds a smooth transtion*/
}

nav a:hover{
   background-color: #064789;  /*Change this value to change the backgournd color of the text*/
   transition: all 0.3s ease-in-out;  /*Adds a smooth transtion*/
}

Navigation With Image CSS:
To make this work replace ".nav-sitename" from the normal navbar with the CSS code below.

.navbar-siteimage{
   float: left;  /*Decides the height of the image*/
   padding: 0;  /*Adds the padding to make the image not close to the left or right side of the page*/
}


.navbar-siteimage img{
   height: 100px;  /*Decides the height of the image*/
   background-color: #FFFFFFF;  /*Adds a background if your image in transparent*/
   padding: 0px 10px 0px 10px;  /*Adds the padding to make the image not close to the left or right side of the page*/
}