CODEWITHSUNDEEP
htmlcssnavbaroverlayz-index
Microvibes
Microvibes

Reputation: 21

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

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>

Upvotes: 2

Views: 6304

Answers (2)

NickCoder
NickCoder

Reputation: 1530

Just set z-index like 

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

.buttons {
  z-index : 1002;
}

and your problem will solve

Upvotes: 0

Codesigner
Codesigner

Reputation: 587

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

Upvotes: 0

Related Questions