Site Header and Main Navigation

The site header and main navigation menu were next on my list so it was time for some CSS, after removing the gravatar and changing the position of the post date,

The Site Header

I’ve shortened the header a bit by decreasing the top padding and also added a bottom padding in order to fit the menu inside

@media only screen and (min-width: 769px) {
.header {
padding-top: 2em;
padding-bottom: 5em;
}
}

Position of the main menu

So after the site header, it was time to move the menu from top, right after the header image. The value for top depends on how much you want to shorten the header and also the amount of bottom padding that you add if you add. Therefore, it needs a bit of testing to find out which number of pixels to put in the top value.

 

 

/*
*Change the position of the main menu and flip the colors of the menu items
*/
@media only screen and (min-width: 769px) {
.main-nav {
top: 194px !important;
position: absolute !important;
background-color: #53a1b8;
color: #f8f8f9;
border-left: 0.422em solid #53a1b8;
border-right: 0.422em solid #53a1b8;
border-bottom: 0.422em solid #53a1b8;
}
.main-nav ul.menu a {
color: #f8f8f9;
}
.main-nav ul.menu > li:hover > a,
.main-nav ul.menu > li > a:hover {
background-color: #fff;
color: #53a1b8;
}
}