What causes the CSS Position Fixed Property to fail?

Can someone help me fix my navbar so that it remains fixed when I scroll? Currently, it moves up as I scroll down. Below are the source codes I'm using:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  margin: 1rem;
}

ul {
  position: fixed;
  width: 100vw;
  padding-top: 5px;
  list-style-type: none;
  background-color: #333333;
  height: 40px;
}

li {
  display: block;
  float: left;
  font-size: 1.25rem;
}

a {
  text-decoration: none;
  color: white;
  padding: 12px;
}

a:hover:not(.home) {
  background-color: #111111;
}

.home {
  background-color: #04aa6d;
}

main {
  position: absolute;
  top: 40px;
  background-color: #1abc9c;
  width: 100vw;
}
<body>
    <header>
      <ul>
        <li><a class="home" href="">Home</a></li>
        <li><a href="">News</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">About</a></li>
      </ul>
    </header>
    <main>
      <h1>Fixed Top Navigation Bar</h1>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear...;

I need help fixing the header/navbar content to remain fixed while scrolling. I'm new to HTML/CSS, so detailed explanations would be greatly appreciated. Thanks, Abdul Alim

htmlcsspositioncss-position

Answer №1

your code is technically correct, but the issue lies in the fact that the navbar is positioned behind another element, causing it to be covered up

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  margin: 1rem;
}

ul {
  position: fixed;
  width: 100vw;
  padding-top: 5px;
  list-style-type: none;
  background-color: #333333;
  height: 40px;
  z-index: 99; /* you can add z-index dinavbar */
}

li {
  display: block;
  float: left;
  font-size: 1.25rem;
}

a {
  text-decoration: none;
  color: white;
  padding: 12px;
}

a:hover:not(.home) {
  background-color: #111111;
}

.home {
  background-color: #04aa6d;
}

main {
  position: absolute;
  top: 40px;
  background-color: #1abc9c;
  width: 100vw;
}
<body>
    <header>
      <ul>
        <li><a class="home" href="">Home</a></li>
        <li><a href="">News</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">About</a></li>
      </ul>
    </header>
    <main>
      <h1>Fixed Top Navigation Bar</h1>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <!-- repeated paragraph for demonstration purposes -->
      <!-- more paragraphs... -->
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
    </main>
  </body>

Answer №2

Make sure to set the z-index property for the < ul > element in your code. Since your header is fixed at the top, it may be hidden behind the < main > section when you scroll down. To avoid this issue, simply add a high z-index value to the < ul >.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1 {
  margin: 1rem;
}

ul {
  position: fixed;
  width: 100vw;
  padding-top: 5px;
  list-style-type: none;
  background-color: #333333;
  height: 40px;
  z-index: 99;
}

li {
  display: block;
  float: left;
  font-size: 1.25rem;
}

a {
  text-decoration: none;
  color: white;
  padding: 12px;
}

a:hover:not(.home) {
  background-color: #111111;
}

.home {
  background-color: #04aa6d;
}

main {
  position: absolute;
  top: 40px;
  background-color: #1abc9c;
  width: 100vw;
}
  <body>
    <header>
      <ul>
        <li><a class="home" href="">Home</a></li>
        <li><a href="">News</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">About</a></li>
      </ul>
    </header>
    <main>
      <h1>Fixed Top Navigation Bar</h1>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
      [...]
      <p>Abdul Alim loves to cultivate crops and travel. Wanna hear a story?</p>
    </main>
  </body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I optimize webkit-mask-box-image with a high-resolution Retina image?

Hey there, wondering if it's possible to achieve high-quality Retina-level CSS masking with the -webkit-mask-box-image property. Specifically, I'm trying to round the corners of an element without using border-radius due to performance issues: . ...

csswebkitmedia-queriesretina-displaymasking

Is it possible to run a Universal Windows Platform desktop app on an Android mobile device?

After successfully developing a Universal Windows Platform app in Visual Studio using WinJS, JavaScript, CSS and HTML, I am now interested in leveraging the same code base to create an Android application. Could you guide me on the necessary steps to run ...

javascriptandroidhtmlcsswinjs

Customize Your Wordpress Category Title with a Background Image

Within my wordpress template, there is a module known as new_boxs. The code snippet below shows that this module displays on the page six times, with two columns wide and three rows down: foreach($data_cat as $cat){ ?> <div class="span6"> ...

phpcsswordpress

Is it possible to create a button function in HTML that can alter the CSS image tag?

Is there a way I could create a function that can retrieve a value, update an image source, and then incrementally select another value? It would be incredibly helpful if you could provide a reference where I could learn how to do this or explain it in det ...

javascriptjqueryhtmlcss

Eliminate unnecessary spacing from the sticky container

Trying to implement a sticky menu in an angular 14 project using angular material 14 has been quite challenging for me. Initially, I attempted to use the 'fixed' position, but encountered issues where the menu would consistently return to the to ...

htmlcssangularangular-material

Utilizing the '<' or '>' operator in combination with an if statement within a Repeater component

Is it possible to use an if statement in a repeater like this? <%#Eval("FN").ToString().Count > 0 ? "SB" : "" %> When I try to implement this, I receive an error 73 indicating that the > operator cannot be used. How can I adjust it so that i ...

htmlasp.netif-statement

Determine whether a WebElement contains a particular content within the :after pseudo class

After locating my element in Selenium, I've come across an interesting challenge. IWebElement icon = box.FindElement(By.ClassName("box-icon")); Sometimes, this element (icon) has a content set as follows: &:after { content: $icon-specia ...

javascriptjquerycssselenium

What is the best way to ensure a DIV fills the entire page without using "position: absolute;"?

I am currently working on designing a webpage layout with multiple headers, main content, and a footer. My goal is to use the jQuery UI tabs widget in the main content area with a border around it. The div should span the entire space between the headers ...

csslayouthtml

Scrolling with Jquery window.scrollTo results in the page becoming unresponsive

I'm currently revamping a website that features a header with 100% screen height, but I need it to shrink down to 0px when a user starts scrolling. The issue I'm facing is that once the header shrinks to 0px, the page content ends up slightly abo ...

javascriptjqueryhtmlcssscroll

A guide on transferring radio button values to another program and saving them into a database with the help of PHP and jQuery

I have encountered an issue with storing radio button values in a database. Specifically, I want to assign the value of 1 for "Yes" and 0 for "No". To accomplish this, I am utilizing two scripts - a.php and b.php. The former obtains the radio button values ...

javascriptphpjqueryhtmlmysql

Unable to display ChartJs within the same DIV on the webpage

I'm struggling to display the Pie Chart from ChartJs in the correct DIV when I click from the left DIV. Running the chart directly works fine, but I want them both on the same page in separate DIVs. I have separate HTML files for each link and they wo ...

javascriptjqueryhtmlcsschart.js

What is a more effective way to showcase tab content than using an iframe?

I currently have a webpage set up with three tabs and an iframe that displays the content of the tab clicked. The source code for each tab's content is stored in separate HTML and CSS files. However, I've noticed that when a tab is clicked, the ...

javascripthtmlcssiframetabs

Customize the Emotion Styled Material UI Tab Indicator Overwrite

Looking for a way to customize the appearance of tab indicators using Emotion styled components. I'm struggling to target nested classes in my code. Here's what I have so far: const StyledTabs = styled(Tabs)( { classes: { indicator: ...

cssreactjsmaterial-uiemotioncss-in-js

Strange occurrences within the realm of javascript animations

The slider works smoothly up until slide 20 and then it suddenly starts cycling through all the slides again before landing on the correct one. Any insights into why this is happening would be greatly appreciated. This issue is occurring with the wp-coda- ...

javascriptcsstransition

On iPhone, links located under a fixed-positioned div can be easily clicked

I am facing an issue on our mobile website where the footer with fixed positioning overlaps with a scrolling feed underneath it, causing the links in the feed to be clickable from the footer area. Footer CSS: .footer { position: fixed; bottom: 0; right: ...

iphonehtmlcsspositioningz-index

Tips for incorporating fading text and a CTA into your content block

I am looking to protect the full content of my blog posts and allow access only to subscribed members. I want readers to see just a glimpse of the article before it disappears, prompting them to take action with a Call to Action (CTA) like in the fading te ...

javascripthtmlcssblogs

magnificPopup experiencing difficulties when attempting to invoke a class that is dynamically generated within the HTML document

Currently, I am encountering an issue with the magnificPopup. Whenever I try to trigger the popup using the class 'popup-with-zoom-anim', it doesn't seem to work as expected. Has anyone else faced a similar problem before? <body> < ...

javascriptjqueryhtmlajaxmagnific-popup

Having trouble selecting a dynamically changing div element in Selenium with Java using a click action

Every time I navigate to www.reddit.com and enter a query in the Search field, then press enter to go to the first valid link within a subreddit, sorting options are presented. By default, it is set to BEST but I wish to change it to TOP. My test class cod ...

javahtmlseleniumdynamic

Is it possible to design this without JavaScript, using only CSS3 and HTML5?

Is it possible to achieve this design using only CSS3 and HTML5, without the use of JavaScript? Header (includes an image) : Height: flexible (depends on the width of the image) Position: fixed Content (contains text) : Height: flexible (height of l ...

htmlcssresponsive-design

Looking to streamline your design? Find out how to translate multiple elements to the same position seamlessly

Greetings! This is my debut post on this platform. I am currently engrossed in a project that has presented me with a challenge, and I'm reaching out to seek your insights on a potential solution. Here's the scenario: I have a parent div containi ...

htmlcsscss-positiondisplaytranslate