Photoshop Question posted in
The official user guide can be found here.

Drop down menu isn't connected to sticky navigation bar when scrolling – Photoshop

I have made a header and below that a sticky navigation bar with a drop down menu.

When I activate the drop down menu it fits perfectly with the navigation bar. But if I scroll down on the website it no longer fits, I get a distance between the navigation bar and the drop down menu equal to the height of my header.

Is the header pushing down my drop down menu when scrolling down? Or is it the distance from the top of the website down to the drop down menu that keeps existing when scrolling down on the website?

I have tried to fix it for days but I can’t get it to work.

/* THIS IS FROM MY topnavigation.css*/

.topnav {
  position: sticky;
  top: 0px;
  overflow: hidden;
  background-color: rgb(2, 31, 70);
}

.topnav a {
  float: left;
  display: block;
  border-right:1px solid #bbb;
  width: 125px;
  font-size: 1.0em !important;
  font-family: 'verdana';
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  border-right:1px solid #bbb;
}

.dropdown .dropbtn {
  width: 125px;
  font-size: 17px;    
  border: 0;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: rgb(79, 111, 150);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  float: none;
  color: #f2f2f2;
  border-right:0px;
  border-bottom:1px solid #bbb;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: rgb(53, 76, 105);
  color: white;
}

.dropdown-content a:hover {
  background-color: rgb(79, 111, 150);
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
  
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;

  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    width: auto;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    text-align: left;
  }
}

/* THIS IS FROM MY style.css */

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  background-color: rgb(3, 19, 34);
}

.header {
  top: 0px;
  padding: 40px;
  margin: auto;
  background-color: rgb(17, 54, 102);
  text-align: center;
  color: #ffffff;  
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  min-height: calc(100vh - 157.88px - 70px);
}

/* Left and right column */
.column.side {
  width: 20%;
  margin-top: 1%;
}

.front.leftside.columns.content {
  width: 100%;

}

.front.rightside.columns.content {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

/* Middle column */
.column.middle {
  width: 60%;
}

.front.column.middle {
  width: 100%;
}

/* Artikel på forsiden */
.front.article {
  background-color: #ffffff;
  border-radius: 10px;
  padding-top: 10px;
  padding-left: 10%;
  padding-right: 10%;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 781px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

.sixteen.px {
  font-size: 16px;
}

.eighteen.px {
  font-size: 18px;
}

/* Billed INDSTILLINGER */
/* img border-radius AFRUNDER BILLEDERS KANTER */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  }

/* Style the footer */
.footer {
  left: 0;
  bottom: 0;
  position: relative;
  width: 100%;
  padding: 10px;
  background-color: rgb(2, 31, 70);
  text-align: center;
  color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>CSS Website Layout</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="CSS/style.css">
  <link rel="stylesheet" href="CSS/topnavigation.css">
</head>

<body>

<header class="header">Mads Ottobrøker</header>

<div class="topnav" id="myTopnav">
  <a href="index.html" class="active"><i class="fa fa-fw fa-home"></i> Forsiden</a>
  <a href="mig.html"><i class="fa fa-fw fa-user"></i> Om mig</a>
  <a href="cv.html"><i class="fa fa-fw fa-file-alt"></i> CV</a>
  <div class="dropdown">
    <button class="dropbtn"><i class="fa fa-fw fa-book-open"></i> Portfolio
    </button>
    <div class="dropdown-content">
      <a href="#">Webdesign</a>
      <a href="#">3D Grafik</a>
    </div>
  </div>
  <a href="kontakt.html"><i class="fa fa-fw fa-envelope"></i> Kontakt</a>
  <a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>


<div class="row">
  <div class="column side">
    <div class="front leftside columns content">
        <img src="images/.jpg" alt="Mads Ottobrøker" width="95%" height="95%">
    </div>
  </div>

  <div class="column middle">
    <div class="front column middle">
      <div class="front article">
        <h1>Voksenelevplads søges!</h1>
        <p>
        <h2>Kontorelev med speciale i administration søger elevplads.</h2>
        </p>
        <p><i><h5>Dec 15, 2020</h5></i></p>
        <hr>
        <h3 class="eighteen px">Mit navn er Mads Ottobrøker, jeg er 38 år og bosat i Hadsund.</h3>
        <p class="sixteen px">
          Jeg søger job som kontorelev med speciale i administration. Jeg brænder for at opnå en god og alsidig,
          kontoruddannelse med speciale i administration, da den giver en solid erfaring samt mulighed, for at
          netværke og videreudvikle sig i et professionelt miljø. Jeg ønsker at arbejde med administration, fordi det
          er et godt og spændende arbejde.
        </p>
        <p class="sixteen px">
          Jeg har gennemført HF samt 5 ugers EUS-forløb. Jeg er tilskudsberettiget voksenelev.
        </p>
        <h3 class="eighteen px">Hvad jeg tilbyder:</h3>
        <p class="sixteen px">
          Jeg har en god forståelse for administration, og kan tilrettelægge mit arbejde således, at mine opgaver
          udføres rettidig og med omhu. Jeg er mødestabil, engageret, og god til at samarbejde. Jeg tager ansvar for
          mit arbejde og kan arbejde både selvstændigt og i teams. Jeg nyder at lære nyt, og har intet problem med
          skiftende arbejdsfunktioner.
        </p>
        <p class="sixteen px">
          Fra detailhandlen er jeg vant til kontakt med borgere, jeg er glad for kontakten og har altid sat en ære i,
          at yde dem den bedst mulige service. Jeg har erfaring med administrering af egne områder i butik, hvor jeg
          bl.a. har håndteret varelager, indkøb, salg og bestillinger.
        </p>
        <p class="sixteen px">
          Jeg har erfaring med: Windows, Word, Excel, PowerPoint, Adobe Photoshop, WordPress og HTML.
        </p>
        <p class="sixteen px">
          Jeg kan tale og skrive på dansk og engelsk, har kørekort B og truckcertifikat
        </p>
        <br>
        <br>
        <br>
      </div>
    </div>
  </div>

  <div class="column side">
    <div class="front rightside columns content">
      <a class="twitter-timeline" data-lang="da" data-width="100%" data-height="400" data-theme="light"
        href="https://twitter.com/MadsOttobroker?ref_src=twsrc%5Etfw">Tweets by MadsOttobroker</a>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
  </div>
</div>

<script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
</script>

<div class="footer">
  <p>Copyright © 2020 Mads Ottobrøker All Right Reserved.</p>
</div>

</body>
</html>

Drop down menu looks good

Drop down menu is no longer connected to navigation bar after scrolling

Tags:

2

Answers


  1. 0

    The position: fixed; on .dropdown-content causes that element to be relative to the browser window and disregards any parent or grandparent it is in, which is why it’s staying in the same place the entire time. If your page had a lot of content making the page taller, you would scroll and that element would stay in the same place.

    • Switching it to position: absolute; will position it relative to it’s parent.
    • Then, remove overflow: hidden; from .topnav and .dropdown as this cut’s it off.
    • Then on .topnav, add width: 100%; and float: left;.
    /* THIS IS FROM MY topnavigation.css*/

.topnav {
  position: sticky;
  top: 0px;
  /* overflow: hidden; */
  background-color: rgb(2, 31, 70);
  float: left;
  width: 100%;
}

.topnav a {
  float: left;
  display: block;
  border-right:1px solid #bbb;
  width: 125px;
  font-size: 1.0em !important;
  font-family: 'verdana';
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  /* overflow: hidden; */
  border-right:1px solid #bbb;
}

.dropdown .dropbtn {
  width: 125px;
  font-size: 17px;    
  border: 0;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(79, 111, 150);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  float: none;
  color: #f2f2f2;
  border-right:0px;
  border-bottom:1px solid #bbb;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: rgb(53, 76, 105);
  color: white;
}

.dropdown-content a:hover {
  background-color: rgb(79, 111, 150);
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
  
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;

  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    width: auto;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    text-align: left;
  }
}

/* THIS IS FROM MY style.css */

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  background-color: rgb(3, 19, 34);
}

.header {
  top: 0px;
  padding: 40px;
  margin: auto;
  background-color: rgb(17, 54, 102);
  text-align: center;
  color: #ffffff;  
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  min-height: calc(100vh - 157.88px - 70px);
}

/* Left and right column */
.column.side {
  width: 20%;
  margin-top: 1%;
}

.front.leftside.columns.content {
  width: 100%;

}

.front.rightside.columns.content {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

/* Middle column */
.column.middle {
  width: 60%;
}

.front.column.middle {
  width: 100%;
}

/* Artikel på forsiden */
.front.article {
  background-color: #ffffff;
  border-radius: 10px;
  padding-top: 10px;
  padding-left: 10%;
  padding-right: 10%;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 781px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

.sixteen.px {
  font-size: 16px;
}

.eighteen.px {
  font-size: 18px;
}

/* Billed INDSTILLINGER */
/* img border-radius AFRUNDER BILLEDERS KANTER */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  }

/* Style the footer */
.footer {
  left: 0;
  bottom: 0;
  position: relative;
  width: 100%;
  padding: 10px;
  background-color: rgb(2, 31, 70);
  text-align: center;
  color: #ffffff;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <title>CSS Website Layout</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="CSS/style.css">
  <link rel="stylesheet" href="CSS/topnavigation.css">
</head>

<body>

<header class="header">Mads Ottobrøker</header>

<div class="topnav" id="myTopnav">
  <a href="index.html" class="active"><i class="fa fa-fw fa-home"></i> Forsiden</a>
  <a href="mig.html"><i class="fa fa-fw fa-user"></i> Om mig</a>
  <a href="cv.html"><i class="fa fa-fw fa-file-alt"></i> CV</a>
  <div class="dropdown">
    <button class="dropbtn"><i class="fa fa-fw fa-book-open"></i> Portfolio
    </button>
    <div class="dropdown-content">
      <a href="#">Webdesign</a>
      <a href="#">3D Grafik</a>
    </div>
  </div>
  <a href="kontakt.html"><i class="fa fa-fw fa-envelope"></i> Kontakt</a>
  <a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>


<div class="row">
  <div class="column side">
    <div class="front leftside columns content">
        <img src="images/.jpg" alt="Mads Ottobrøker" width="95%" height="95%">
    </div>
  </div>

  <div class="column middle">
    <div class="front column middle">
      <div class="front article">
        <h1>Voksenelevplads søges!</h1>
        <p>
        <h2>Kontorelev med speciale i administration søger elevplads.</h2>
        </p>
        <p><i><h5>Dec 15, 2020</h5></i></p>
        <hr>
        <h3 class="eighteen px">Mit navn er Mads Ottobrøker, jeg er 38 år og bosat i Hadsund.</h3>
        <p class="sixteen px">
          Jeg søger job som kontorelev med speciale i administration. Jeg brænder for at opnå en god og alsidig,
          kontoruddannelse med speciale i administration, da den giver en solid erfaring samt mulighed, for at
          netværke og videreudvikle sig i et professionelt miljø. Jeg ønsker at arbejde med administration, fordi det
          er et godt og spændende arbejde.
        </p>
        <p class="sixteen px">
          Jeg har gennemført HF samt 5 ugers EUS-forløb. Jeg er tilskudsberettiget voksenelev.
        </p>
        <h3 class="eighteen px">Hvad jeg tilbyder:</h3>
        <p class="sixteen px">
          Jeg har en god forståelse for administration, og kan tilrettelægge mit arbejde således, at mine opgaver
          udføres rettidig og med omhu. Jeg er mødestabil, engageret, og god til at samarbejde. Jeg tager ansvar for
          mit arbejde og kan arbejde både selvstændigt og i teams. Jeg nyder at lære nyt, og har intet problem med
          skiftende arbejdsfunktioner.
        </p>
        <p class="sixteen px">
          Fra detailhandlen er jeg vant til kontakt med borgere, jeg er glad for kontakten og har altid sat en ære i,
          at yde dem den bedst mulige service. Jeg har erfaring med administrering af egne områder i butik, hvor jeg
          bl.a. har håndteret varelager, indkøb, salg og bestillinger.
        </p>
        <p class="sixteen px">
          Jeg har erfaring med: Windows, Word, Excel, PowerPoint, Adobe Photoshop, WordPress og HTML.
        </p>
        <p class="sixteen px">
          Jeg kan tale og skrive på dansk og engelsk, har kørekort B og truckcertifikat
        </p>
        <br>
        <br>
        <br>
      </div>
    </div>
  </div>

  <div class="column side">
    <div class="front rightside columns content">
      <a class="twitter-timeline" data-lang="da" data-width="100%" data-height="400" data-theme="light"
        href="https://twitter.com/MadsOttobroker?ref_src=twsrc%5Etfw">Tweets by MadsOttobroker</a>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
  </div>
</div>

<script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
</script>

<div class="footer">
  <p>Copyright © 2020 Mads Ottobrøker All Right Reserved.</p>
</div>

</body>
</html>
    Login or Signup to reply.
  2. 0

    There are two problem’s in your code. Fix those two CSS and your will get your expected behavior.

    First, position: fixed in .dropdown-content. Since position: fixed element is positioned relative to the browser window.
    Change it to position: absolute.

    .dropdown-content {
  display: none;
  //position: fixed;
  position: absolute;
  background-color: rgb(79, 111, 150);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

    Second, overflow: hidden in .topnav. I guess you are using this for creating Block-level formatting context. So instead of using overflow: hidden for Block-level formatting add display: flow-root in .topnav css.

    .topnav {
  position: sticky;
  top: 0px;
  //overflow: hidden;
  background-color: rgb(2, 31, 70);
  display: floot-root;
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search