-
Posts
-
I am wanting to stop my header from overlapping with my page content.
When I add the code to lock my header.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}it changes the layout of my page so that the header overlaps and covers some of the content. This results in the page titles, some images, and other content, not being visible, even when you scroll to the very top of the page. They are visible when I remove this code, but I would like to keep it as I need my header to always be visible. How can I lock my header and not have it cover my page title text?
2) I am also hoping to give my menu a little more room and my logo a little less. Could you also help with that?
Thank you so much!
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-headerat 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-leftandnav-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; }Wrong website address. I’m so used to putting the other one. Here is the actual. We’re using Linx theme. The questions were not valid for the previous website. Thanks for your help in advance!
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; }That code works great for sticking the header to the top, but the new issue is that the header background seems to be transparent, so it blends into the content of the page as you scroll >< I tried to apply a color (white) but it didn’t seem to work. Help? Thank you~
actually~ It seems like the header is BEHIND all of the content… So that’s the fix I need. I’ll keep working on it, too.
I put it at z-index: 1; It seems to work, but I’d love confirmation that this is good code and not breaking something else.
- The topic ‘Sticky header without covering the page content’ is closed to new replies.
