Sticky header without covering the page content

Hi Aaron-

Thanks for the great question!

I checked out your site, and I couldn’t find any pages where the page content was being covered up like you described. In fact, I didn’t see any elements with the class .site-header at all. Did you already resolve this? If not, can you include a link to one of the pages that has the problem so we can take a closer look for you?

The answer to creating a sticky header is going to depend heavily on which theme you’re using. Some themes, like our own Crio Pro WordPress Supertheme, include an option to create a sticky header without using any custom CSS.

As for your second question, you’re right that the paddings on your logo and your menu are a little off. Your logo has a 30-pixel padding-top, and your menu has 25 pixels. You can target these with the classes nav-left and nav-right, so if you wanted to line up the menu with the logo, you could do something similar to this:

.nav-right {
   padding-top: 30px;
}

Hi Aaron-

As I mentioned in your other thread, I did find your website address from your Premium Support Ticket.

Try adjusting your CSS to this:

.site-header {
position: sticky;
top: 0;
}

Hi Aaron-

Sorry for the delay getting back to you. I checked it out and it does look like you did a great job fixing my error in the CSS! I don’t see any side-effects on the pages I checked out.