wbbosworth

Worked perfectly. I did run into one problem on one page (www.reachnaz.com/give). I have a button that is an overlay on the background photo. In mobile view, the button covers the words in the picture.

I think I have it working now.

This is the code that is in CSS: body:not(.header--menu-open) .burger-inner>div { background-color: white !important; } .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 100; visibility: visible; width: 30%; margin-left: 70%; box-shadow: -5px 5px 15px #000} div.header-menu-nav-item a { font-size: 20px !important; padding: 10px; } .header-menu-nav-item {line-height: 20px!important;} @media screen and (min-width:992px) { .header-menu-actions { justify-content: center !important; } .header-menu-cta { position: relative; top: -100px; } } @media screen and (max-width:991px) { .header--menu-open .header-menu { width: 100% !important; margin-left: 0 !important; } }

About Us — Reach Church of the Nazarene (reachnaz.com) Give — Reach Church of the Nazarene (reachnaz.com) Connect — Reach Church of the Nazarene (reachnaz.com) Reach Groups — Reach Church of the Nazarene (reachnaz.com) Contact 2 — Reach Church of the Nazarene (reachnaz.com)

This worked for the home page video, but I would like to also resize every page size background video or image. Most pages have an image(s) - only two pages have a video.

I believe that the code turned my whole header white. I have my header invisible with a background video playing behind it, so I have the logo and hamburger menu white. So, I need the header completely transparent and only the logo and hamburger menu white.

Site URL: https://www.reachnaz.com I need my hamburger menu to be white. It is currently black. This is the code that I am using for the menu. What do I need to change or add to make the menu white and not black. .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 100; visibility: visible; width: 30%; margin-left: 70%; box-shadow: -5px 5px 15px #000} div.header-menu-nav-item a { font-size: 20px !important; padding: 10px; } .header-menu-nav-item {line-height: 20px!important;} @media screen and (min-width:992px) { .header-menu-actions { justify-content: center !important; } .header-menu-cta { position: relative; top: -100px; } } @media screen and (max-width:991px) { .header--menu-open .header-menu { width: 100% !important; margin-left: 0 !important; } }

I have tried several codes for sitewide scaling of background video and images for mobile view. None of the codes have worked for me. www.reachnaz.com

LOL - oh my goodness. You're right. I guess there is nothing we can do about that - if the videographer cut his head off. Thank for your help.

Ok, I want to make an interactive "map" of links. For example, "Start Here" click on image to complete step 1. Another image/link is step 2 - through 6 different steps. So, I spent FOREVER making a section of 6 round images for each step. Then I added images of arrows that directed them from one step to another. The end product looked similar to a treasure map. I attached a pic for reference (I deleted the original from the website to start over. The pic attached is a rough design for reference - not exactly what I used on the site. Each of the circle were linked to another page or another website. The arrows were just images added into the section. So, it looked great in desktop view, but when I went to mobile view - of course all of the images were out of place and no longer made the beautiful map. "Lock images into place" was my amateur way of asking - How can this type of interactive section be done and look good in all different device views.

Site URL: https://www.reachnaz.com/firsttime I am not a complete amateur, but I'm close. Is there a way to lock images into place if there are several images all in one section of the page?

I sorry. I misread the original question. I don't have a shop, but my background video is being cut off by the header. I didn't read the question completely. Here is a screenshot of the home page. Notice the top of the video (background video) is cut off.

I have the same problem, but my header is set at opacity 0%. I tried the code you offered below, but it made the header have a white background. www.reachnaz.com

HELP! I am having the same issue with my background video on my homepage (reachnaz.com). I have tried the codes listed above, saving, and reloading, but they have not worked.