Is the element refusing to adhere for some mysterious cause?

Question

Is the element refusing to adhere for some mysterious cause?

Hello, I've been attempting to create a navigation bar using the position:sticky property, but for some reason, it's not sticking. I've scoured the internet for solutions, but couldn't find a fix, so here I am seeking help.

/*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 does 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>Portfolio</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 am completely baffled as to why it is not working. It could be that I am using it in the wrong place or something else entirely.

My plan is to make it more responsive, but that is a project for another day, so please ignore the poor user interface on smaller windows for now.

html css

Answer 1

Answer №1

When you applied position: sticky; to the <ul>, the element remained in the flow. This means that it will exit the viewport once the parent element leaves the viewport.

Instead of adding sticky to the <ul>, you need to apply it to the containing <div>.

sticky is compatible with all browsers except for IE, which is set for deprecation starting August 16, 2021 and does not support sticky even with vendor prefixes.

/* 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>

Answer 2

When you applied position: sticky; to the <ul>, the element remained in the flow. This means that it will exit the viewport once the parent element leaves the viewport.

Instead of adding sticky to the <ul>, you need to apply it to the containing <div>.

sticky is compatible with all browsers except for IE, which is set for deprecation starting August 16, 2021 and does not support sticky even with vendor prefixes.

/* 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>

Is the element refusing to adhere for some mysterious cause?

Answer №1

Similar questions

Unlock the power of Component level CSS in NextJS with this simple guide!

Can you explain the connection between CSS and WebKit?

Is there a way for me to retrieve the value from an input, round it up to the nearest even number, and assign it to a new variable?

Is there a way to align the Title in the Titlebar to the center?

Can someone tell me where I can locate the CSS file once I've finished using Scene Builder?

Providing CSS through PHP file on IIS Server

Angular show more button determined by line count, not letter count

Unusual CSS hierarchy observed post AJAX content load

Having issues with jQuery Overlay functionality on Internet Explorer 8

Using HTML to showcase various prompt messages based on the screen resolution

Center the font in the middle of the text field

Rule for restoring scroll position upon reloading web pages in browsers

What is the best way to set the screen height without needing to scroll vertically?

align video element to the right within a container div

Hover and hover-off functions in navigation menu

The integration between React hook form and reactstrap input components is not functioning properly

Ensuring consistent width for two divs using CSS

Creating a custom named page using PHP and MySQL

Show an HTML email message on a webpage without disrupting the existing page layout

Accessing and manipulating web elements using either XPath or CSS selectors