Hello,
I’m having issue with a header that I’m trying to make sticky.
I’m using the “BlockStar” theme, which comes with a horizontal banner and a cover picture in the header.
I would like to keep both the picture and this banner to be screen wide, and only have the banner being sticky.
The issue is, I also would like the content on the banner to be aligned with the content of the website (1000px I think?).
So right now I know how to make the banner content be both sticky, and be aligned with the content, but that makes it so the banner background (color) is not screenwide, so I have a floating small sticky banner in the middle of the screen.
If I make this banner be screenwide, I cannot have the content be aligned with the website anymore.
I thought I could try something by bringing the cover out of the header, but when I do, nothing will stick anymore.
I understand that it would help being able to see the website, but the person for whom I am making this it is not willing to let it be published before it’s ready.
Thanks for the help!
[ad_2]
Sounds like you need some custom css to achieve this . Could you DM the url and I can have a quick look for you?
it sounds like your nav has a max width, so when you add a background color it is not spanning the entire width of the page.
You could try wrapping the nav in a div and add the background and position:sticky to that outer div
You would make the sticky header full width.
Then, the content inside of it would be contained inside a container
Then, the same with the content. full width with a container inside (same width as the header container).
When the header is made sticky, they will both align.
If they’re the same width, using margin-left: auto; margin-right: auto; (or margin: 0 auto; if top and bottom margins aren’t set) will center the content within the container.