[Resolved] mp4 Header Giving me Grief

[Mary Pearson]

I am updating an old website at https://tooleyspainting.com/

I am using HTML5 Video Player for the header since it auto plays.

(Note: I have been unable to create a header element because the Primary Nav bar goes above the video even though I choose below header, so I am using a hook instead.)

The problems I’m having are as follows:

1. When the video loads, it loads a really big image for a split second before going to correct size.
2. Video has light grey borders which I would like removed
3. Video touches the top of the secondary nav menu. I would like to move it down so there are borders top and bottom.

Would appreciate any help.
Many thanks!

[David]

Hi there,

can’t see how we can control the loading of the image.
You can use the Header Element to move the Nav Below it you would need to:

1. Set the Navigation location to Below Header.
2. add this PHP Snippet:

add_action( 'after_setup_theme','craig_move_navigation' );
function craig_move_navigation() {
    remove_action( 'generate_after_header', 'generate_add_navigation_after_header', 5 );
    add_action( 'generate_after_header', 'generate_add_navigation_after_header', 15 );
}

[Mary Pearson]

Thank you David. Do you know how I can remove the borders or move the video down?

[Tom]

Are we sure the borders aren’t a part of the video? I’m not seeing any CSS for them.

To move it down, try this:

.secondary-navigation {
    margin-bottom: 10px;
}

[Mary Pearson]

Thanks for your help Tom and David. I have contacted HTML5 Video Plugin support but have not heard back. Since it is probably their issue I will consider this topic closed on this forum but am just curious.

Can you tell me please why I was unable to use the Header Element “out of the box”? I don’t mind adding the snippet but just wondering why. I thought it might be a plugin conflict so I deactivated everything but it didn’t make a difference. I have never had this problem before.

Many thanks!

[David]

Thats the expected behaviour of the Header Element. The ordering of Elements are like so:

Site Header
After Header (priority 5 ) -> Primary Navigation
After Header (priority 10 ) -> Header Element

So it always has required a little bit of code to move the Navigation below it.

[Mary Pearson]

Ahhh, thank you for the explanation. Much appreciated!

[David]

You’re welcome

[Author]

Posts