Navigation changing when screen shrinks, Video in background of header not showing up

Support
#1

Hello,

I hope you are well.

Here is the temporary staging site I am referring to: http://chosen.staging.wpengine.com/

NAVIGATION CHANGING WHEN SCREEN SHRINKS

When the screen size is reduced, I want the inline navigation to switch to a mobile friendly navigation (like the navigation modal.)

I have 2 inline navigations in my header. The top one appropriately changes, but the bottom one (white bar at bottom of header) just squishes together. Can you please tell me how to fix this so that the modal pops up when there is no room for the text.

VIDEO

I want to experiment with having a video be in the background of the header. I added an mp4 video to Bar 4 > Container 1. But it is not showing up. I watched the Tips and Tricks video on backgrounds and I think I followed what was said, but can’t find more information to get it to show. I saw a forum entry that said it needs to be mp4. So I put a test mp4 video in there. Do you know what settings need to be changed to get the video to show? Are Mp4 files the only video files that will work?

Thank you for your help,
Jennifer

#2

Hey Jennifer,

For the navigation, just set it up like your first menu. Make the Navigation Inline element hidden on mobile then add a Navigation Collapsed element and make it display only on mobile. You need to use the Hide During Breakpoints option available under the Customize tab of each element.

For the video, there is a conflict caused by your custom Javascript. Please remove the script in Global Javascript then test again.

Thanks.

#3

Thanks so much for your help.

Your tips for the navigation worked great.

For some reason, the sticky bar with the navigation is shrinking (when the page is scrolled down) which makes it hard to see the mobile navigation icon. When I set the Sticky Setup > Shrink Amount to 0, it shrinks a lot. When I set it to 1, it shrinks less but still shrinks. Do you know what I can do so that it does not shrink at all? (Selecting “Keep margin” does not seem to have an effect).

VIDEO

I am not aware of any global javascripts on the site. Do you know where I should go to delete the Global Javascript that you think is conflicting with the video?

Thanks again. I really appreciate your help.

Best wishes,
Jennifer

#4

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#5

Thanks! I sent a private reply with the info.

#6

Hello There,

Please send a reply and create a secure note instead. Replying in private will only allow one staff to access the info. Whereas if you create a secure note, any staff who is on duty can reply and respond to your question. Please check out first how you can get support and how to reply with a secure note from here: https://theme.co/apex/forum/t/how-to-get-support/288

Please let us know how it goes.

#7

Thanks. I sent the secure note.

(FYI: the secure note option is not visible when I click “inline reply” to you, I had to add it to a post that I made previously.)

#8

Hello There,

Thanks for providing the information. To display the video, you will have to make sure that the container will serve as a column and that the width should be 100% (http://prntscr.com/g1nt8z). And also play around with the self flex (http://prntscr.com/g1o0q8). The height and outer spacing of the bar container should also be set (http://prntscr.com/g1o16p).

Hope this helps.

#9

HI,

Thanks for your reply.

I checked to see that all the settings are as you described. The only thing I had to change was the column. It looks like you changed the other things for me. (Thanks). But the video is still not working.

In this thread, Xian mentioned that he thought there was a Global Javascript that could be blocking the video. I have no idea where the global javascript that could be blocking the video would be. Can you figure out where it is and how it can be stopped?

If that is not the problem, can you please help me figure out how I can get the video to be able to play.

Thanks for your help. I really appreciate it.

Best wishes,
Jennifer

#10

Hello Jennifer,

Thanks for updating in! In desktop screens, the video is displaying. It is can be seen here: http://prntscr.com/g2dsce
Please understanding that videos will automatically gets disabled in mobile screens. Videos are bandwidth hogger this is why on smaller screens or mobile phones, the videos will no longer play and will be replaced with a video image poster. So please do not forget to insert the video image poster.

Hope this helps.