[Support request] fixed header and page hero background help

[John MacKenzie]

Hi All, i had emailed originally about this but wanted to get it into forum and see if we can sort out the last couple issues.

the issues i have now.

1) If i add the css code to fix my header, it starts to overlap my hero background image how do i solve this?
2) for the hero background image, i am having issues with how it looks on smaller resolutions.
a) the content of the hero text box doesnt resize smaller as the screen gets smaller so the background image changes but not the action box content. how can i make that consistent?
b) if i resize the screen to less than about 1055px right now the menu snaps under the logo, and covers more of the background hero image. how can i set it when this happens to make sure it doesnt cover the image, AND make the logo be centered at that point?
c) once the screen gets small enough id like to STACK the background image on top of the call to action box instead of them melding into each other. (say under 800px wide)

thanks!!

[Tom]

1. This is because fixed elements are taken out of the flow of the document. You can add padding to the body to offset it:

body {
    padding-top: 120px; /* height of your fixed element */
}

2a) You can adjust the font sizes with media queries like this:

@media (max-width: 800px) {
    .page-hero-content h1 {
        font-size: 30px;
    }

    .page-hero-content h2 {
        font-size: 20px;
    }
}

b) You could use our Navigation Drop Point option (Customize > Layout > Primary Navigation) to center the logo/nav at that point. However, that will make the header taller, so I suggest un-fixing the header at that point for UX reasons.

c) There isn’t really an easy way to do that with a background image. Have you considered adding the image as a static image instead?

[John MacKenzie]

Hi Tom

thanks ill fiddle with those. regarding c) i would for sure but your page hero element seems to only allow you to set it as a background? is there something i am missing?

thanks!

John

[David]

Hi there,

Why not add the image using HTML img tag instead of adding it as a background?

[John MacKenzie]

thanks, well every other site i see uses background including the sample from leo so figured that was what i should do. Ive got it played around with as an actual image but still am hitting some blocks, but am making progress so thanks!!

– the border around the content now extends down to the height of the image in my 2nd div.
when i shrink to below 1070px wide the menu jumps down over top my image, is ther a way to push down the hero the same amount AND make it centre the logo when that happens. Assume media queries need to be used here but just not sure where to start with that.

thanks!

[David]

It is doable with the background images, just thought this may be a simple route to achieve what you need.

1. So we can add some margin to this CSS you already have:

.page-hero-content {
    padding: 20px;
    border: 5px solid rgba(43,50,140,0.2);
    border-radius: 10px;
    max-width: 68%;
    float: left;
    margin: 5%; /* add this property */
}

2. If you up to date on GP Theme 2.2 then in the Customizer > Layout > Primary Navigation > Navigation Drop Off point, adjust this to suit and it will do exactly that.
2.1 the nav going over the content is because of this CSS, just remove it:

.custom-fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000;
}

[John MacKenzie]

ok thanks ill check those out

if i get rid of the custom fixed header then i dont have a fixed header anymore 🙂 which i do want?

[David]

The problem is the size of the fixed header changes on the smaller screens. And theres no easy way to stop that from overlapping the content in your page hero.
The alternative method would be to not use header and site logo and instead add the logo to your navigation and use the GP Sticky Navigation. It would mean changing the colors of your navigation though.

[Author]

Posts