CODEWITHSUNDEEP
htmlcssnavbar
tsahib
tsahib

Reputation: 45

Elment over a sticky navigation bar

I'm trying to build a website and I have a sticky navigation bar (place in the header). I added a new section and place there some text, but when I scroll down, it surpasses the navbar as you can see: enter image description here

Is there any option to avoid it?

HTML code:

.about-text 
{
    background-color: rgb(0, 0 ,0);
    /*background-color: rgba(0, 0, 0, 0.5);*/
    color: white;
    font-weight: bold;
    border: 3px solid black;
    border-radius: 5px;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 40%;
    padding: 20px;
    text-align: center;
}
<section id="intro">
            <div class="about-text">
                <h2>Hey there!</h2>
                <h1 style="font-size:50px">I am Tsahi Barshavsky</h1>
                <p>Thanks for steping by</p>
                <button id="aboutBtn" onclick="window.location.href='#about';">More on me</button>
            </div>
        </section>

Thanks!

Upvotes: 1

Views: 45

Answers (1)

ɐsɹǝʌ ǝɔıʌ
ɐsɹǝʌ ǝɔıʌ

Reputation: 4512

Check whether your navbar has position: fixed and also a z-index set to a value higher than your about-text

.navbar {
    position: fixed;
    z-index: 999;
}

.about-text {
    z-index: 2;
}

Upvotes: 1

Related Questions