[Support request] can i do this? extend header image visibility past navigation?

Home Forums Support [Support request] can i do this? extend header image visibility past navigation?

Home Forums Support can i do this? extend header image visibility past navigation?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #591735
    sparkle

    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.

    View post on imgur.com

    thanks again for such a lovely product.

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #591753
    David
    Staff
    Customer Support

    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.

    #591829
    sparkle

    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.

    #591830
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.