Archived topic
can i do this? extend header image visibility past navigation?
3 replies · Started by sparkle on June 4, 2018
hi, i'm using GP to convert a website and i'm running into a couple of questions.
- we have a header image that shows through beneath the navigation to the top of the page content area.
- we were able to adjust the height of our header so the bottom of the 'logo' head image was hiding him up to almost his chin.
can i do these things with generatepress? i've tried a bunch of css and i'm failing.
here is an image that shows the new and old side by side. to see the old site, remove test. from the url provided.
thanks again for such a lovely product.
Hi there,
you can add padding to the bottom of the header like so:
.site-header {
padding-bottom: 60px:
}Then its a case of increasing the negative margin on the primary navigation to compensate for that.
thanks for your help.
i can't seem to get it all to move up in harmony. i was hoping there was something like 'overflow: visible' that would work on that background image so i didn't have to mess with negative margins since that always looks terrible on mobile.
Unfortunately background images cannot extend beyond their container. Yes, i agree negative margins are not a good thing.
You can wrap that CSS in a media query if you want to apply it to desktop only.
Alternative maybe to splice the header background image so part of it becomes the top of the content background.
