Element not sticking for unknown reason?

Question

hello i'm trying to make a nav bar using the position:sticky property but for some reason its not sticking i've searched the web for answers but couldnt find any fix so here I am

/*variables*/

:root {
  --black: black;
  --white: #FFFFFC;
  --pink-white: #FEF7FF;
  --p-pink: #FFC6FF;
  --p-purple: #BDB2FF;
  --p-dark-blue: #A0C4FF;
  --p-light-blue: #9BF6FF;
  --p-green: #CAFFBF;
  --p-yellow: #FDFFB6;
  --p-orange: #FFD6A5;
  --p-red: #FFADAD;
  --box-shadow-val: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  --font-val: 'Montserrat', sans-serif;
  --radius-val: 0.75em;
  --hover-white: #F2F2F0;
}

body {
  margin: 5;
}


/*here*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--white);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  box-shadow: var(--box-shadow-val);
  font-family: var(--font-val);
  border-radius: var(--radius-val);
}

li {
  float: left;
}

li a {
  display: block;
  color: var(--black);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: var(--hover-white);
}


/*img is not part of original code just there to show it dose not stick*/

<!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">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
  <title>Portfilo</title>
</head>

<body>
  <div class="navBar">
    <ul>
      <li><a href="#port" class="Port"><b>What Is Port</b></a></li>
      <li><a href="#priv" class="Priv"><b>Privacy</b></a></li>
      <li><a href="#reg" class="Reg"><b>Get Started</b></a></li>
      <li><a href="#guides" class="Guides"><b>Guides</b></a></li>
      <li><a href="#cred" class="Cred"><b>Credits</b></a></li>
    </ul>
  </div>
  <!-- img is not part of original code -->
  <img src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</body>

</html>

I have litterally no idea why it would not be working it might be me using it in the wrong place or something.

I'm planning to make it more responsive but that for another day so please excuse the bad UI on smaller windows.

tacoshy · Answer 1 · 2021-08-14T21:37:11.293

you added position: sticky; to the <ul>. However sticky does not move the element out of the flow. Means the element will leave the viewport once the parent element leaves the viewport.

As such you have to add the sticky not to the <ul> but the containing <div>

sticky is supported by all browsers with exeption of IE (that will be deprecated starting at the 16th August 2021 and does not support sticky even with vendor-prefix)

/* css changes */
.navBar {
  position: sticky;
  top: 0;
}


/* original css */
/*variables*/
:root {
  --black: black;
  --white: #FFFFFC;
  --pink-white: #FEF7FF;
  --p-pink: #FFC6FF;
  --p-purple: #BDB2FF;
  --p-dark-blue: #A0C4FF;
  --p-light-blue: #9BF6FF;
  --p-green: #CAFFBF;
  --p-yellow: #FDFFB6;
  --p-orange: #FFD6A5;
  --p-red: #FFADAD;
  --box-shadow-val: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  --font-val: 'Montserrat', sans-serif;
  --radius-val: 0.75em;
  --hover-white: #F2F2F0;
}

body {
  margin: 5;
}


/*here*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--white);
  box-shadow: var(--box-shadow-val);
  font-family: var(--font-val);
  border-radius: var(--radius-val);
}

li {
  float: left;
}

li a {
  display: block;
  color: var(--black);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: var(--hover-white);
}


/*img is not part of original code just there to show it dose not stick*/

<!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">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
  <title>Portfilo</title>
</head>

<body>
  <div class="navBar">
    <ul>
      <li><a href="#port" class="Port"><b>What Is Port</b></a></li>
      <li><a href="#priv" class="Priv"><b>Privacy</b></a></li>
      <li><a href="#reg" class="Reg"><b>Get Started</b></a></li>
      <li><a href="#guides" class="Guides"><b>Guides</b></a></li>
      <li><a href="#cred" class="Cred"><b>Credits</b></a></li>
    </ul>
  </div>
  <!-- img is not part of original code -->
  <img src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</body>

</html>

Element not sticking for unknown reason?

1 Answers1