Question

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;
  }
Was it helpful?

Solution

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.

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top