CODEWITHSUNDEEP
htmlcss
JON PANTAU
JON PANTAU

Reputation: 395

Unfixed Navigation Bar in front of image

I have put an image on the top of my page, but I also want to insert a navigation bar on the top of the page (in front of the image). But the reality the navigation bar is above the image, I cant put them both on the same row, I can do it with make the navibar fixed top, but its really annoying when I scroll down. Is there any way to solve my problem?

(PS: Image is not a background!)

<nav class="navbar " role="navigation">
<div class="container-fluid">
    <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
        <ul class="nav navbar-nav">
            <li>
                <a> Link </a>
            </li>
            <li>
                <a> Link </a>
            </li>
            <li>
                <a> Link </a>
            </li>
            <li>
                <a> Link </a>
            </li>
            <li>
                <a> Link </a>
            </li>
        </ul>
    </div>
</div>
</nav>
<img src=" ">

Upvotes: 1

Views: 3279

Answers (1)

David Tanzer
David Tanzer

Reputation: 2742

This should work:

.navbar {
  position: absolute;
  top: 0;
  left: 0;
}

See: https://jsfiddle.net/tcybj6sj/

You basically had the right idea: Pin the nav bar to the top of the page. But instead of using position: fixed, which pins the nav bar to a fixed position within the browser window, use position: absolute, which pins the nav bar to a fixed position within the page.

Upvotes: 2

Related Questions