CODEWITHSUNDEEP
htmlcss
Jeffrey Lan
Jeffrey Lan

Reputation: 92

Position: fixed; makes the div element that it is applied to disappear

I’ve recently been making a new website, and I’m trying to make a small navigation dock/bar. I would like the bar to stick at the top, so I applied position: fixed; to the “top-bar”. However, as soon as I apply it, it disappears. I have declared the width of the bar to auto, so that it stretches across the screen. This is desired. Here is the HTML:

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=decice-width, initial-scale=1.0" />
        <link href="https://fonts.googleapis.com/css?family=Kulim+Park&display=swap" rel="stylesheet">
        <title>sprank</title>
        <style>
        html {
            height: 100%;
            width: 100%;
            margin: none;
        }
        body {
            height: 100%;

        }
        p, h1, h2, h3, h4, h5, h6 {
            font-family: 'Kulim Park', sans-serif;
            color: white;

        }
        .intro-background {
            width: auto;
            height: 100%;
            background: rgb(2,0,36);
            background: linear-gradient(10deg, rgba(2,0,36,1) 0%, rgba(80,80,255,1) 100%, rgba(0,212,255,1) 100%);
            background-repeat: no-repeat;
            background-size: cover;
            margin: -8px -8px -8px -8px;

        }
        .top-bar {
            width: auto;
            opacity: 75;
            height: 50px;
            margin: -8px -8px -8px -8px;
            position: fixed;
            background-color: white;

        }
        .heading {
            font-size: 50px;
            float: right;
            margin-right: 4px;

        } 
        .number2 {
            float: left;
            font-size: 35px;
            margin-right: 4px;

        }
        </style>
        </head>
    <body>
        <div class="top-bar"><img src="Spranktopbar.png" alt="Sprank Logo" style="position: fixed; height: 50px; width: 50px;"></div>
        <div class="intro-background">
        <br><p class="heading">Welcome to sprank!</p>
        <br><p class="heading number2">A network where you can play cool games and chat</p><br>
        <br><p class="heading" style="font-size: 35px">And a safe haven to relax and chill</p></div>













    </body>
</html>

Here is the website: http://zippernet.000webhostapp.com/ Thanks for your help.

Upvotes: 0

Views: 124

Answers (1)

Rob Kwasowski
Rob Kwasowski

Reputation: 2780

Change your .top-bar class from width:auto to width:100%.

Upvotes: 1

Related Questions