1

I'm currently working on a simple webpage for my music-project and want to make the Navigation-Bar stay on top of everything else all the time. I've set an absolute position, z-index and overflow:hidden, but I can't seem to find the tiny cause of my problem.

There are more people with similar issues and I tried more solutions but I just can't find my error. When I resize the window, my elements still mix into eachother:

enter image description here

I attached my full code below:

<html>

<head>  

    <!-- Basic Page Needs
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <meta charset="utf-8">
    <title>fabrice.</title>
    <meta name="description" content="fabrice - official website">
    <meta name="author" content="Daniel Pölzgutter">

    <!-- Mobile Specific Metas
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="stylesheet" type="text/css" href="/style.css">

    <!-- favicon
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="shortcut icon" type="image/png" href="/res/icons/favicon.png"/>

</head>



<body>  



    <!-- PAGES
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->

    <!--featured-->
    <div id="js_featured" class="page">
        <div class="container">


            <div class="row">

                <div class="twelve columns" style="margin-top: 5%">
                    <h4 align="center" style="font-family: aileron-heavy; font-size: 50px">featured</h4>
                </div>

                <div class="twelve columns">
                    <p align="center" style="font-family: aileron-thin; font-size: 25px">...</p>
                </div>

            </div>


        </div>
    </div>


    <!--releases-->
    <div id="js_music" class="page" style="display:none">
        <div class="container">


            <div class="row">

                <div class="twelve columns" style="margin-top: 5%">
                    <h4 align="center" style="font-family: aileron-heavy; font-size: 50px">releases</h4>
                </div>

                <div class="twelve columns">
                    <p align="center" style="font-family: aileron-thin; font-size: 25px">...</p>
                </div>

            </div>


        </div>
    </div>


    <!--contact-->
    <div id="js_contact" class="page" style="display:none">
        <div class="container">


            <div class="row">

                <div class="twelve columns" style="margin-top: 5%">
                    <h4 align="center" style="font-family: aileron-heavy; font-size: 50px">contact</h4>
                </div>

                <div class="twelve columns">
                    <p align="center" style="font-family: aileron-thin; font-size: 25px">...</p>
                </div>

            </div>


        </div>
    </div>





    <!-- NAVIGATION BAR
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->

    <div id="navbar_box">  
        <div class="navbar">

            <div id="brand_box">
                <div class="brandtext">fabrice.</div>
            </div>

            <div id="textbutton_box">
                <button class="textbutton" onclick="openPage('js_featured')">featured</button>
                <button class="textbutton" onclick="openPage('js_music')">releases</button>
                <button class="textbutton" onclick="openPage('js_contact')">contact</button>
            </div>

            <div id="icon_box">
                <a href="https://www.facebook.com/danielfabricem/" class="icon" id="facebook" target="_blank"></a> 
                <a href="https://twitter.com/danielfabricem" class="icon" id="twitter" target="_blank"></a>
                <a href="https://www.instagram.com/danielfabricem/" class="icon" id="instagram" target="_blank"></a>
                <a href="https://www.snapchat.com/add/danielfabricem" class="icon" id="snapchat" target="_blank"></a>
                <a href="https://www.youtube.com/channel/UCNGXQlfrPtou-CpHSJDiicQ" class="icon" id="youtube" target="_blank"></a>
                <a href="https://open.spotify.com/artist/4qpNXA2Fz4VjjzPAvoK9Uc" class="icon" id="spotify" target="_blank"></a>
                <a href="https://soundcloud.com/danielfabricem" class="icon" id="soundcloud" target="_blank"></a>  
            </div>           

        </div>      
    </div>





    <!-- JAVASCRIPT
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->

    <script>
        /*switch sites*/
        function openPage(name) {
            var i;
            var x = document.getElementsByClassName("page");

            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none"; 
            }

            document.getElementById(name).style.display = "block"; 
        }
    </script>   






</body>

HTML

CSS

Biffen
  • 6,249
  • 6
  • 28
  • 36
poellemonster
  • 13
  • 2
  • possible duplicate: https://stackoverflow.com/questions/3225102/css-overflow-hidden-with-absolute-position – לבני מלכה Apr 15 '18 at 12:42
  • Your `#navbar_box` does not have a background color, which means it is transparent and anything behind it will show through (e.g. the "features" text). Giving it `background-colour: white` fixes the issue. `overflow: hidden` does not hide content that is not a child of the element: it only hides its own overflowing content. – Terry Apr 15 '18 at 12:52
  • Thanks a lot! That did it! – poellemonster Apr 15 '18 at 13:08

2 Answers2

0

Have you tried position:fixed,and don't use overflow property

Faizal Hussain
  • 1,551
  • 2
  • 10
  • 18
0

Is this want you want? https://jsfiddle.net/cCrul/a4g3ghLt/

I just removed this:

.navbar{
    background-color: white;
}

And add background-color: white; to #navbar_box styles:

#navbar_box {
    background-color: white;
    (...)
}
raul.vila
  • 1,984
  • 1
  • 11
  • 24