質問

What I want to achieve here, is to transparent navigation bar hide anything underneath and leave background only. So if you scroll down the page anything that goes under fixed navbar will be hidden. I've googled it but didn't found any satisfying results. Is it even possible?

Here's the demo site: http://klaunfizia.pl/damian/ Style: http://klaunfizia.pl/damian/style.css

what I got now: http://i.imgur.com/6k2yNJbh.jpg What I want to achieve: http://i.imgur.com/VICvrUDh.jpg

Background image isn't solid, so setting navigation bar color to #ff7400 won't be a solution.

code:

        <ul id="menu">
            <li>
                <a href="#">
                    &nbsp; Home &nbsp;
                </a>
            </li>
            <li>
                <a href="#">
                    &nbsp; About me &nbsp;
                </a>
            </li>
            <li>
                <a href="#">
                    &nbsp; Portfolio &nbsp;
                </a>
            </li>
            <li>
                <a href="#">
                    &nbsp; Contact &nbsp;
                </a>
            </li>

        </ul>
    </nav>

<section id="container">
    <section id="main">
        <h1>hi! My name is Damian</h1>
        <p class="mainText">
            I'm a graphic designer from Poland specializing in web design, 3D modeling, vector graphics and digital drawing. See my portfolio for more information.
        </p>
    </section>
</section>

css:

#navbar
 {
    height: 80px;
    width: 100%;
    position: fixed;
    -webkit-transform: translateZ(0);
    z-index: 10;
    top:0;
  }
役に立ちましたか?

解決

Why can't you set the same background color and image as the body?

#navbar {
    background: url(images/background.jpg) #ff7400;
}

Works just dandy in Chrome dev tools.

他のヒント

Assuming that your header/menu container has a solid background color, this looks like a simple z-index issue. Give your menu a higher z-index.

If you could provide more code or a jsfiddle, I could tell you exactly which line of css to add/remove/fix. Unfortunately your site isn't loading.

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top