How do I overlay a transparent navbar over a hero image and have a functioning button on the hero image?

2
votes

I’ve set my nav bar as transparent on top of my hero image, however, the buttons on my hero image do not work.

The nav-bar has a z-index of 1, and my hero image, text and button has a z-index of -1. This makes the button unclickable, as it is set to be behind the navbar.

Things I’ve tried:

-I’ve tried to give my button a z-index of 1, but it doesn’t work

-I’ve tried to wrap my button in a div class and set the z-index of that to 1, but it doesn’t work

-If I reverse the z-index of the nav bar and hero image, the buttons work, however, the nav bar is set behind the image and cannot be seen.

How do I accomplish having the nav bar on top of the hero image AND have my button clickable?

.top-nav{
    font-size: 20px;
    margin-top:0em;
    margin-bottom:0em;
    font-weight:600;
    padding: 0px 32px;
    color: white !important;    
    background: transparent;
}

 
.navbar-overlay {
    position:relative;
    margin-bottom: -104px;  
    z-index: 1;  
}

.first-section-hero {    
    position: relative;
    min-height: auto;
    height:900px;
    margin-top: 0em;
    padding-bottom: 10em; 
    background-image:url("{% static 'img/yellow_swoosh.svg' %}");  
     background-position: center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-repeat:no-repeat;
    z-index: -1;
}
<section class="top-nav ">
    <div class= navbar-overlay >
        <nav class="navbar navbar-expand-lg navbar-dark ">
            <a class="navbar-brand"  href="{{ home_url }}">Name</a>
                <div class="collapse  navbar-collapse " id="navbarText">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item  ">
                        <a class="nav-link" href="/articles">Resources</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/features">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/about">About </a>
                    </li> 
                </ul>
            </div>     
        </nav>
    </div>
</section>

<section class="first-section-hero" > 
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-xs-12 ">
                <h1>TITLE</h1>
                <a href="#" class="btn btn-default btn-xl">FIND OUT MORE</a>
            </div>
        </div>
    </div>
</section>
2
htmlcssnavbaroverlayz-index
Use positive z-indexes instead – Ali Sheikhpour
Which is the navbar height? How is that the nav overlaps the hero buttons? Could you add some imager reference and maybe the whole section code? – vitomadio
I've added more code :) – Microvibes
I see a bunch of relative positions and no absolute. Make the parent of the hero image relative. Put the nav after the hero image within the same relative parent. Make all of the children of the relative parent position:absolute; top:0; left:0;. If layered correctly you won't even have to use a z-index, using this technique. – StackSlave

2 Answers

0
votes

Your Z-index should be greater than the nav-bar that overlaps the button.

0
votes

Just set z-index like 

.image {
  z-index : 1000;
}
.navbar {
  z-index : 1001;
}

.buttons {
  z-index : 1002;
}

and your problem will solve