Navigation / Header Bar
Navigation HTML:
<nav>
<div class="navbar-sitename">
<a><h3>Site Name Here</h3></a>
</div>
<div class="navbar-items">
<a href="your-link-here.com"><h3>Item 1</h3></a>
<a href="your-link-here.com"><h3>Item 2</h3></a>
<a href="your-link-here.com"><h3>Item 3</h3></a>
</div>
</nav>
<nav>
<div class="navbar-sitename">
<a><h3>Site Name Here</h3></a>
</div>
<div class="navbar-items">
<a href="your-link-here.com"><h3>Item 1</h3></a>
<a href="your-link-here.com"><h3>Item 2</h3></a>
<a href="your-link-here.com"><h3>Item 3</h3></a>
</div>
</nav>
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*/
}
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 HTML:
<nav>
<div class="navbar-siteimage">
<a><img src="link.image.com/image.png"/></a>
</div>
<div class="navbar-items">
<a href="your-link-here.com"><h3>Item 1</h3></a>
<a href="your-link-here.com"><h3>Item 2</h3></a>
<a href="your-link-here.com"><h3>Item 3</h3></a>
</div>
</nav>
<nav>
<div class="navbar-siteimage">
<a><img src="link.image.com/image.png"/></a>
</div>
<div class="navbar-items">
<a href="your-link-here.com"><h3>Item 1</h3></a>
<a href="your-link-here.com"><h3>Item 2</h3></a>
<a href="your-link-here.com"><h3>Item 3</h3></a>
</div>
</nav>
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*/
}
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*/
}