Make CSS Modal Cover ALL Fixed Headers

Hi There,

Since I’m new to this forum site, I somehow stopped getting responses.

My newest CSS modal looks Great, and I figured out how to hide the body scroll bar, so that Doesn’t interfere with the modal scrollbar. I still need to get this modal to cover the fixed header, and I’d like to Disable the page after the modal is scrolled through. I only want the page to show after the modal is shut.

On CodePen, I have the modal covering a fixed header! However, on 2 other site templates that I’m using, the modal Isn’t yet covering the fixed header. There must be a Easy Quick fix! Me spending several hours on this Doesn’t appear to be going anywhere. At least one person please help me with a solution! Below is All the HTML and CSS so far for one of the templates. Thanks! :sunglasses:

<!DOCTYPE html>
<html lang="en">
<head>
    
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>Template Editing</title>
  
  <link rel="stylesheet" href="style.css">
  
  <link rel="stylesheet" href="pop-up-modals-OFF.css">
  
  <link rel="stylesheet" href="modal-test.css">
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  
</head>

<body>
    
  <nav class="navigation-bar js-hide-page-index">
      
      <!-- &#9776; (OPEN MOBILE MENU) -->
      
      <span class="toggle-button animated pulse infinite">&#9776;</span>
      
      <a href="#page-hero" class="logo animated fadeIn infinite">TOP LOGO<br>200 X 50</a>
      
      <ul class="main-menu">
          
          <!-- <li class="menu-item"><a href="#">Home</a></li> -->
          
          <li class="menu-item has-submenu-OFF"><a tabindex="0">ABOUT US +</a>
            <ul class="submenu">
                <li class="submenu-item"><a href="#about">ABOUT US</a></li>
                <li class="submenu-item"><a href="#">WHY US</a></li>
                <li class="submenu-item"><a href="#">OUR TEAM</a></li>
                <li class="submenu-item"><a href="#">Q & A</a></li>
            </ul>
          </li>
          
          <li class="menu-item has-submenu-OFF"><a tabindex="0">OUTREACHES +</a>
            <ul class="submenu">
                <li class="submenu-item"><a href="#">STREET OUTREACH</a></li>
                <li class="submenu-item"><a href="#">PRISON OUTREACH</a></li>
                <li class="submenu-item"><a href="#">SENIORS OUTREACH</a></li>
                <li class="submenu-item"><a href="#">FALSE FLAG OUTREACH</a></li>
            </ul>
          </li>
          
          <li class="menu-item has-submenu-OFF"><a tabindex="0">CONTACT US +</a>
            <ul class="submenu">
                <li class="submenu-item"><a href="#">CONTACT FORM</a></li>
                <li class="submenu-item"><a href="#">CONTACT INFO</a></li>
                <li class="submenu-item"><a href="#">OUR LOCATION</a></li>
                <li class="submenu-item"><a href="#">WHATEVER</a></li>
            </ul>
          </li>
          
          <!-- <li class="menu-item"><a href="#">About Us</a></li>
          
          <li class="menu-item"><a href="#">Contact Us</a></li> -->
          
      </ul>
  </nav>
  
<!-- START PAGE HERO -->  
  
<div id="page-hero" class="animated flip">
                  
<div class="page-hero-name">
PAGE HERO NAME
</div>
                  
<div class="page-hero-tagline">
PAGE HERO TAGLINE
</div>
  

<div class="arc-modals">

<a href="#modal-1" class="open-modal-btn-1">Box 1</a>

<div id="modal-1" class="modal-dialog">
  
<div class="arc-modal-1">
  
<a href="" title="SHUT Modal" class="shut-arc-modal">(X) &nbsp; &nbsp;</a>
  
<h2>TEXT / IMAGE MODAL</h2>
  
<p>This Is A Text / Image Modal. &nbsp; This Is A Great Place For Updates On What You Are Currently Doing, Important Notices, ToS, Policies, Portfolios Or Whatever!</p>
  
<p><img src="https://placehold.co/250x200/FFF/4169E1/png"></p>
  
<p>This Is A Text / Image Modal. &nbsp; This Is A Great Place For Updates On What You Are Currently Doing, Important Notices, ToS, Policies, Portfolios Or Whatever!</p>
  
<p><img src="https://placehold.co/250x200/FFF/4169E1/png"></p>
  
<p>This Is A Text / Image Modal. &nbsp; This Is A Great Place For Updates On What You Are Currently Doing, Important Notices, ToS, Policies, Portfolios Or Whatever!</p>
  
<p><img src="https://placehold.co/250x200/FFF/4169E1/png"></p>
  
</div></div>
  
<!-- END ARC TEXT / IMAGE MODAL -->
  
<!-- START ARC VIDEO MODAL -->

<a href="#modal-2" class="open-modal-btn-2">Box 2</a>

<div id="modal-2" class="modal-dialog">
    
<div class="arc-modal-2">
  
<a href="" title="SHUT MODAL" class="shut-arc-modal">(X) &nbsp; &nbsp;</a>  
  
<div class="modal-video-header">Modal Video Header WhooHoo!!!</div>
      
<iframe class="modal-video" src="https://youtube.com/embed/cO3CU_6jHQQ" frameborder="0"
    allow="accelerometer; encrypted-media"></iframe>
  
<p>This Is A Intro Video Modal!  &nbsp; On Small Screens, The Video Displays @ 250px By 150px. &nbsp; On Other Screens, The Video Shows @ 650px By 400px. &nbsp; Videos Can Be Loaded From A Number Of Video Platforms! &nbsp; NOTE!  &nbsp; Some Video Platforms Add BAD SPY TRACKERS To Your Site! &nbsp; I ONLY Added Y T On Here For Demo Purposes.</p>
  
</div></div>

</div>
  
 <!-- END ARC VIDEO MODAL -->
  
 <!-- END BOTH ARC MODALS -->

                  
</div> <!--</div>-->

<!-- END PAGE HERO -->
  
  
  <div id="about" class="page-id"><p>ABOUT US</p>
  
  <p>ABOUT US 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1</p>
  
  <p><img src="https://placehold.co/250x200/663399/C0C0C0/png"></p>
  
  <p>ABOUT US</p>
  
  </div>
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  
  <script src="script.js"></script>
  
  <script src="modal-test.js"></script>
  
<script>
  
   // .js-hide-page-index Runs With jQuery 3.7.1   
  // Select All »a« Elements With A Parent Class »links« And Add A Function That Is Executed On Clicks
$( '.js-hide-page-index a' ).on( 'click', function(e){
	
  // Define Variable Of The Clicked »a« Element (»this«) And Get The HREF Value.
  var href = $(this).attr( 'href' );
  
  // Run A Scroll Animation To The Position Of The Element That Has The Same ID Like The HREF Value.
  $( 'html, body' ).animate({
		scrollTop: $( href ).offset().top
  }, '300' );
	
  // STOP Page Indexes From Showing In Browser Toolbars When Smooth Scrolling Up And Down The Page.
  e.preventDefault();

});
      
</script>

<!-- LOOKING FOR A AUTO SHUT ON MOBILE SCROLL SCRIPT -->
  
<script>

document.getElementById("main-menu").onclick = function ()
{
  document.getElementById ("check").check = false;
};

</script>
  
</body>
</html>
/* Main CSS So Far */

html,
body {
  /* Firefox */
  scrollbar-width: none;
  /* IE 10+ */
  -ms-overflow-style: none;
}

/* WebKit - Safari, Chrome, Opera */
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Basic Styles Starts */
/* Reset Style */

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Default Typography */
body {
    font: 700 15px 'Arial', Sans-Serif;
    overflow-x: hidden;
}

html {
   scroll-behavior: smooth;
}

/* Navigation Bar */
.navigation-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #C0C0C0;
    padding1: 10px 10px;
    opacity: 1;
    z-index: 1;
}

/* List Items */
.main-menu, .submenu-item {
    list-style-type: none;
}

/* Anchor Tags */
.logo {
    background: #4169E1;
    color: #FFF;
    width: 200px;
    height: 50px;
    text-decoration: none;
    cursor: pointer;
}

.menu-item a {
    background: Transparent;
    color: #FFF;
    height: 50px;
    text-decoration: none;
    cursor: pointer;
}

/* Basic Styles Ends */
/* Adding Styles to Logo and Menu Items Start */

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font: 700 15px 'Arial', Sans-Serif;
    margin-left1: 20px;
}

.menu-item {
    background: #663399;
    text-align: center;
    padding: 12px 0;
}

.menu-item:hover {
    background: #4169E1;
    color: #C0C0C0;
    text-align: center;
    padding: 12px 0;
}

.menu-item:active {
    background: #4169E1;
    color: #C0C0C0;
    text-align: center;
    padding: 12px 0;
}

/* Adding Styles to Logo and Menu Items Ends */
/* Sytles for the Toggle Button Start */
.toggle-button {
    position: absolute;
    float: right;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #663399;
    color: #FFF;
    width: 50px;
    height: 50px;
    font-size: 25px;
    font-weight: bold;
    cursor: pointer; 
}

.toggle-button:hover {
    color: #C0C0C0;
}

.main-menu {
    display: none;
}

.active.main-menu {
    display: block;
}

/* Sytles for the Toggle Button Ends */

/* Adding Styles to Submenu Starts */

.has-submenu > a::after {
    content: "\2B9F"; /* 2B9F */
}

.submenu-item a {
    display: inline-block;
    padding-top: 12px;
    color: #FFF;
}

.submenu-item a:hover {
    color: #C0C0C0;
}

.submenu {
    display: none;
    color-OFF: #FFF;
}

.submenu-active .submenu {
    display: block;
}

.submenu-active {
    background: #663399;
}


/* Adding Styles to Submenu Ends */

/* For Desktop Start */

@media screen and (min-width: 768px) {
/* Hide Toggle */

.toggle-button {
    display: none;
}
     
/* Make Menu Visible */
.main-menu {
    display: block;
}
     
/* Style Navigation Bar Start*/
.navigation-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 5px;
}
    
.main-menu {
    display: flex;
}
    
.menu-item {
    position: relative;
    display: block;
    background: #663399;
    margin-left: 20px;
    font: 700 15px 'Arial', Sans-Serif;
    width: 200px;
    height: 50px;
}
/* Style Navigation Bar End*/
    
/* Style Active Submenu */
.submenu-active {
    background: #663399;
    color: #FFF;
}
    
.submenu-active .submenu {
    position: absolute;
    right: 0;
    top: 50px;
    background: #4169E1;
    padding: 0 20px 20px 20px;
    width: 200px;
    text-align: center;
}
    
.submenu-active .submenu:hover {
    background: #4169E1;
}
    
/* Hover Style */
.logo:hover {
    color: #FFF;
    background: #4169E1;
}

.menu-item:hover {
    background: #4169E1;
    color: #C0C0C0;
}

.menu-item a:hover {
    background: Transparent;
    color: #C0C0C0;
}
}
/* For Desktop Ends */


.page-id {
    position: relative;
    min-height: 100vh;
    max-width: 100%;
    display: block;
    justify-content1: center;
    margin: 0 auto;
    top1: 25px;
    margin-top1: 25px;
    padding: 75px 5px 0 5px;
    font: 700 15px 'Arial', Sans-Serif;
    text-align: center;
    background: #FFF;
    color: #4169E1;
}

.page-id p {
    margin-bottom: 15px;
}

#page-hero {
    display: flex;
    flex-direction: column;
    justify-content: normal;
    align-items: center;
    text-align: center;
    background-image: linear-gradient(rgba(65, 105, 225, 0.7), rgba(65, 105, 225, 0.7)), url("https://images.pexels.com/photos/2234006/pexels-photo-2234006.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
}

.page-hero-name {
    font: 700 28px Arial;
    color: #663399;
    margin-top: 100px;
}
      
.page-hero-tagline {
    font: 700 24px Arial;
    color: #FFF;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* Modal CSS */

.arc-modals {
  display: block;
  margin: 0 auto;
}

.arc-modals .open-modal-btn-1,
.arc-modals .open-modal-btn-2 {
   display: block;
   margin: 0 auto;
   width: 200px;
   background: #4169E1;
   color: #C0C0C0;
   font: 700 16px Arial;
   text-align: center;
   text-decoration: none;
   margin-bottom: 10px;
   padding: 5px;
}

.arc-modals .open-modal-btn-1:hover,
.arc-modals .open-modal-btn-2:hover {
   background: #663399;
   color: #C0C0C0;   
}

.arc-modals .open-modal-btn-1 {
  /* ADJUST margin-top: PER TEMPLATE */
  margin-top: 75px;
  margin-bottom: 10px;
}

.arc-modals .open-modal-btn-2 {
  margin-bottom: 10px;
}

.arc-modals .modal-dialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background: #C0C0C0;
    font: 700 16px Arial;
    /* CENTER MODAL TEXT / IMAGES */
    text-align: center;
    opacity: 0;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: none;
}

.arc-modals .modal-dialog:target {
    pointer-events: auto;
    padding-bottom: 5px;
    /* animation: flip / bounce / appear */
    animation: appear 350ms ease-in 1;
    height: 100vh;
    opacity: 1;
    /* MAKE THIS z-index: A HIGHER NUMBER THAN THE FIXED HEADER! */
    z-index: 2;
}

.arc-modals .modal-dialog > div {
    position: relative;
    top: 0;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    /* ADJUST PADDING TOP PER TEMPLATE */
    padding: 90px 0 0 0;
}
      
.arc-modals .modal-dialog p {
  color: #4169E1;
  font: 700 16px Arial;
  width: 100%;
  margin-bottom: 25px;
  /* ADJUST padding: PER TEMPLATE */
  padding: 0 5px 25px 5px;
}

.arc-modals .modal-dialog h2 {
  color: #663399;
  font: 700 20px Arial;
  margin-bottom: 25px;
}

.arc-modals .modal-dialog a {
  color: #663399;
}

.arc-modals .shut-arc-modal {
    position: fixed;
    float: right;
    /* ADJUST top: PER TEMPLATE */
    top: 50px;
    right: 0;
    left: 0;
    bottom: 0;
    background: #C0C0C0;
    color: #663399;
    text-align: right;
    width: 100%;
    /* ADJUST height: PER TEMPLATE */
    height: 35px;
    text-decoration: none;
    font: 700 20px Arial;
    /* ADJUST padding-top: PER TEMPLATE */
    padding-top: 9px;
    margin-right: -20px;
    -webkit-border-radius: none;
    -moz-border-radius: none;
    border-radius: 0;
}

.arc-modals .shut-arc-modal:hover { 
  background: #C0C0C0;
  color: #4169E1;
}

/* Width */
.arc-modals ::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.arc-modals ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #C0C0C0;
  margin-top: 35px;
  border-radius: 10px;
}
 
/* Handle */
.arc-modals ::-webkit-scrollbar-thumb {
  background: #4169E1; 
  border-radius: 10px;
}

/* Handle On Hover */
.arc-modals ::-webkit-scrollbar-thumb:hover {
  background: #663399; 
}

/* .arc-modals .body-scroll-hidden {
  display: none;
}

.arc-modals .hide-body-scroll {
  overflow: hidden;
} */

.arc-modals .modal-video-header {
  display: block;
  margin: 0 auto;
  transition: all 200ms;
  font: 700 20px Arial;
  text-align: center;
  background: #4169E1;
  color: #FFF;
  width: 650px;
  height: 35px;
  margin-top: 25px;
  padding-top: 7px;
  text-decoration: none;
}

.arc-modals .modal-video {
  display: block;
  margin: 0 auto;
  width: 650px;
  height: 400px;
  margin-bottom: 15px;
}

@media screen and (max-width: 768px) {
    
.arc-modals .modal-video-header {
  display: block;
  margin: 0 auto;
  transition: all 200ms;
  font: 700 20px Arial;
  text-align: center;
  background: #4169E1;
  color: #FFF;
  width: 250px;
  height: 50px;
  margin-top: 25px;
  padding-top: 5px;
  text-decoration: none;
}
  
.arc-modals .modal-video {
  display: block;
  margin: 0 auto;
  width: 250px;
  height: 150px;
  margin-bottom: 15px;
}
}

@keyframes appear {
  0% {
    opacity: 0;
    transform: translateY(-100px);
}
}

Can you share the codepen link?

I think that I’m Not yet qualified to post full links on here. I did my best below.

The fixed header in CodePen is Different than the what I posted on here. However, I have (z-index: 1) for the fixed header, and (z-index: 2) for the modal dialog for both. :slight_smile:

CodePen .io /FavorMan/pen/raBPbyL

I’m looking forward to your suggestions PauloRodrigues. :grinning: