[Resolved] Fixed top menu and header with background image

[Lisa]

Hi Tom,

I’ve run into a bit of a coding challenge. My client wants to emulate this website http://pennhurstasylum.com/ with the background image behind the navigation & header image along with the video playing when the site loads. The video on our site will be added next week. I’m using a placeholder image for now on the staging site: http://cc2.6d3.myftpupload.com/.

Is it possible with your theme to:

1. Have the transparent brick wall background span the navigation, header and into the content area so that you have the uneven edge of the wall laying over the image instead of the horizontal line I have now? (I can make the logo image smaller to help accomplish this.)

2. Pennhurst also has a Buy Tickets Now image that lays over the header/content area on the right – would it be possible to help me with that as well?

Thank you!

Lisa

[Tom]

Hi Lisa,

First, remove the black background from the header (Customize > Colors > Header).

Then, remove this CSS:

.custom-fixed-header + * {
    padding-top: inherit;
}

You could insert that button into the header using GP Hooks and use CSS to position it. If you want to insert it and let me know I should be able to help 🙂

[Lisa]

Hi Tom,

Thanks so much for that, it worked!

Next problem to tackle – I put the Buy Tickets image in the After Header Content hook with padding-left: 40% to push it away from the logo image. I believe, for larger screens, the location is fine but it doesn’t work so well on the smaller screens.

Can you help me float this image so it is left of the menu on smaller screens?

Thank you,

Lisa

[Tom]

Try this instead:

.buyTickets {
    position: absolute;
    right: 10%;
    bottom: -20px;
}

[Lisa]

Hi Tom,

That didn’t quite work. No matter what numbers I tried, the buy tickets image will shift left or right but will not shift up or down. The goal is to have it shift up toward the menu on a smaller screen.

Weirdly, now that the video is in, there is padding between the video and the background wall image – any recommendations to get that wall background to lay over the video?

Thanks so much for your guidance.

[Tom]

You have this:

.custom-fixed-header + * {
    padding-top: inherit;
}

When it should be:

.custom-fixed-header + * {
    padding-top: 0px;
}

Or just completely removed.

The rest of the black bar is actually a part of the video. Perhaps the aspect ratio is off a bit? You may be better off using it as a background video: https://codepen.io/dudleystorey/pen/PZyMrd

As for the button, changing the “bottom” attribute to 0px will bring it to the bottom of the header. -10px will make it 10px higher than where it is now.

[Lisa]

Hi Tom,

Thanks so much for that CodePen – I really appreciate you providing me with that idea and your help with the Buy Tickets image. I’m using sections to separate the video (section 1) from the text (section 2) but I keep getting the video playing behind the text in section 2.

I need it to be a background video in section 1 not in the text in section 2. I tried making the background in section 2 black but that covered up the video.

Can you help me push the text in section 2 below the background video?

Also, I have both sections set to a class of no-padding and section 1 (box type & inner box type) to full width but I’m still getting space on either side of the video. Any ideas of why that would be happening?

Thank you again for your help

[Tom]

Hmm, maybe try adding your video code into the Page Header add-on: https://docs.generatepress.com/article/page-header-content/

Then set the height of the area to full screen: https://docs.generatepress.com/article/page-header-content/#fullscreen

[Lisa]

You are absolutely brilliant! Your solution did the trick, http://cc2.6d3.myftpupload.com/.

Thank you, ever so much for your time and guidance on this one!!

[Lisa]

Hi Tom, I know I marked this as solved but it when I checked the site on another browser, the header image is now rendering small and no longer stretches across the full width of the screen.

Ideas?

Thank you.

[Tom]

Hi Lisa,

Which browser?

[Lisa]

Hi Tom,

I’m seeing the issue on chrome, ie, edge, firefox & opera. Worse on opera as here is a gap between the header image and the navbar that is about 15-20px tall.

The Content Page Header is set to fullscreen and the container type is full width. I moved this code into the Page Header Content

<iframe src=”https://www.youtube.com/embed/XhfF6QzqJWo?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=XhfF6QzqJWo&#8221; frameborder=”0″ allowfullscreen></iframe>

And this CSS

* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}

[Tom]

The gap and header not being full is caused by your CSS:

.custom-fixed-header {
    position: fixed;
    top: 85px;
    width: 80%;
    z-index: 2000;
}

The top value needs to be adjusted, and the width needs to be 100%.

As for the video, it seems full screen, but there are black bars on the sides. I believe this is due to the aspect ratio of the video, as the YouTube iframe itself is reaching the edges of the browser.

You could get the video as an MP4 and use the video background feature in the Page Header: https://docs.generatepress.com/article/page-header-background-video/

That will force it to be full size, but can’t be taken from YouTube (currently).

[Lisa]

I apologize for the delay in responding to you. I was waiting on feedback. Adding the mp4 video link to the background video page header appears to be putting us closer to the goal. It was working well on large screens but suddenly the audio stopped.

Also, I noticed the video wasn’t playing on an older android devise – does that mean we should also upload ogv and webm videos to correct that issue?

Any ideas of what I can do to restore the audio?

Thanks again for your help!

[Tom]

Ah, didn’t think about that. The Page Header add-on doesn’t allow for audio at the moment.

Back to square one! You might have to work with it showing the black bars depending on screen resolution. You can do some searching around to see if it’s possible to fix that.

[Author]

Posts