Navbar and logo stay together when scrolling?

Question

I'm trying to make the navbar follow the logo whenever the user scrolls down. Currently only the logo is fixed. When I try to make the header fixed instead of the header-img, both the logo and navbar disappeared. Any help would be greatly appreciated.

Another issue I have is that the logo resizes whenever I resize my window.

#header-img {
  width: 3%;
  height: auto;
  position: fixed;
}

nav {
  list-style-type: none;
  position: relative;
  left: 65px;
  line-height: 60px;
  font-size: 20px;
}

<div id="header">
  <img id="header-img" src="https://cdn-0.idownloadblog.com/wp-content/uploads/2018/07/Apple-logo-black-and-white.png"></img>
  <nav id="nav-bar">
    <a class="nav-link" href="#mac">Mac</a>
    <a class="nav-link" href="#ipad">iPad</a>
    <a class="nav-link" href="#contactus">Contact Us</a>
    <a class="nav-link" href="#support">Support</a>
  </nav>
</div>


<div id="body">
  <iframe id="video" width="1080" height="1920" src="https://www.youtube.com/watch?v=PSS889-qeJQ">
  </iframe>
  <h1 id="mac">Macs</h1>
  <h1 id="ipad">iPads</h1>
  <h1 id="contactus">Contact Us</h1>
  <h1 id="support">Support</h1>
</div>

As you said navbar and logo disappears after setting its position to fixed. I think you are not setting the z-index after that. Set z-index: 1 for navbar and icon — Irfan wani, Feb 08 '21 at 11:23

score 0 · Answer 1 · edited Feb 08 '21 at 15:19

I removed the logo here just because it was too big. I added the #header to the CSS with position: fixed;, take a look:

#header {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 7%;
  background-color: #0066FF;
}

#header-img {
  width: 3%;
  height: auto;
  position: fixed;
}

nav {
  list-style-type: none;
  position: relative;
  left: 65px;
  line-height: 60px;
  font-size: 20px;
}

<div id="header">
  <nav id="nav-bar">
    <a class="nav-link" href="#mac">Mac</a>
    <a class="nav-link" href="#ipad">iPad</a>
    <a class="nav-link" href="#contactus">Contact Us</a>
    <a class="nav-link" href="#support">Support</a>
  </nav>

</div>

<div id="body">
  <iframe id="video" width="1080" height="1920" src="https://www.youtube.com/watch?v=PSS889-qeJQ">
  </iframe>
  <h1 id="mac">Macs</h1>
  <h1 id="ipad">iPads</h1>
  <h1 id="contactus">Contact Us</h1>
  <h1 id="support">Support</h1>
</div>

I tried using this but the header and navbar still doesn't show. **#header{ position:fixed; z-index: 1; width:100%; height:7%; background-color: #0066FF; }** — Ismael, Feb 08 '21 at 11:41

score 0 · Answer 2 · edited Feb 08 '21 at 12:58

Your code contain img tag with closing tag. It doesn't have closing tag by default.

To fix the navbar you need to add position: fixed; to the #header.

To prevent the logo from resizing you need to add width: 100%; to the img tag and add specific width and height to it's parent (.img-container).

Try this:

#header-img {
  width: 100%;
  height: auto;
}

nav {
  list-style-type: none;
  position: fixed;
  left: 65px;
  line-height: 60px;
  font-size: 20px;
  top: 0px;
}

#header {
  position: fixed;
  height: 60px;
}

.img-container {
  height: 35px;
  width: 35px;
  display: inline-block;
}

<div id="header">
  <div class="img-container">
    <img id="header-img" src="https://cdn-0.idownloadblog.com/wp-content/uploads/2018/07/Apple-logo-black-and-white.png">
  </div>
  <nav id="nav-bar">
    <a class="nav-link" href="#mac">Mac</a>
    <a class="nav-link" href="#ipad">iPad</a>
    <a class="nav-link" href="#contactus">Contact Us</a>
    <a class="nav-link" href="#support">Support</a>
  </nav>
</div>

<div id="body">
  <iframe id="video" width="1080" height="1920" src="https://www.youtube.com/watch?v=PSS889-qeJQ">
  </iframe>
  <h1 id="mac">Macs</h1>
  <h1 id="ipad">iPads</h1>
  <h1 id="contactus">Contact Us</h1>
  <h1 id="support">Support</h1>
</div>

score 0 · Answer 3 · answered Feb 08 '21 at 11:42

You need to remove the margin from the document, and also make the header with a fixed position

Incidentally, your iframe is not working, as you need to specify the /embed and not /watch parameter for it to work. You can learn more about it clicking here

I also made some changes to the style of your page, but you can change that in the CSS rules

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
        }

        #header-img {
            width: 3%;
            /* height: auto; */
            position: fixed;

        }

        body {
            background-color: black;
        }

        nav {
            list-style-type: none;
            position: relative;
            left: 65px;
            line-height: 60px;
            font-size: 20px;
        }

        nav a {
            padding-left: 10px;
            text-decoration: none;
            color: black;
            font-weight: 500;
            text-transform: uppercase;
        }

        #header {
            background-color: white;
            width: 100%;
            position: fixed;
        }

        .content {
            display: flex;
            justify-content: center;
            margin-bottom: 60px;

        }

        h1 {
            color: white;
            margin-bottom: 10px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="header">
        <img id="header-img"
            src="https://cdn-0.idownloadblog.com/wp-content/uploads/2018/07/Apple-logo-black-and-white.png"></img>
        <nav id="nav-bar">
            <a class="nav-link" href="#mac">Mac</a>

            <a class="nav-link" href="#ipad">iPad</a>

            <a class="nav-link" href="#contactus">Contact Us</a>

            <a class="nav-link" href="#support">Support</a>
        </nav>

    </div>
    <br><br><br><br><br><br>
    <div class="content">
        <iframe src="https://www.youtube.com/embed/PSS889-qeJQ" height="400" width="600"
            title="Iframe Example"></iframe>
    </div>

    <div class="heading">
        <h1 id="mac">Macs</h1>
        <h1 id="ipad">iPads</h1>
        <h1 id="contactus">Contact Us</h1>
        <h1 id="support">Support</h1>
    </div>

</body>

</html>

IDEAS FOR THE FUTURE

You could start learning about responsive design, so that your website works on any devices, without restrictions. Research flexbox and you will learn a lot of interesting things, or start studying a framework, like Bootstrap, that will make your life easier.

Navbar and logo stay together when scrolling?

3 Answers3