Header element not keeping the navbar at the bottom

My goal is to attach this navigation bar to the bottom of a header, but it's sticking to the top instead. I want the navigation to remain at the bottom of the header even when the user scrolls down.

Currently, both the header and navigation are set to position: fixed, so they hover over the content as intended. However, the navigation bar stays at the top of the header rather than the bottom, cutting off the first part of the content. Can anyone suggest a CSS-only solution to fix this issue with non-nested fixed elements? They seem to not stack as expected.

<div id="wrapper">
  <header></header>

<nav>
   <ul>
      <li href="#">1</a></li>
      <li href="#">2</a></li>
      <li href="#">3</a></li>                   
   </ul>
</nav>

<main>
  <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 

</main>
</wrapper>

HTML

header{
   position: fixed;
   background-color: #333;
   padding-left: .5rem;
   width: 100%;
   font-size: 1rem;
   padding-bottom: 1rem;
   padding-top: 1rem;
   z-index: 100;
}

nav{
  position: fixed;
  bottom: 0;
   display:block;
   background-color: yellow;
   width: 10rem;
}

CSS

To see the current behavior in action, check out this CodePen link: http://codepen.io/anon/pen/XKbVVX

htmlcss

Answer №1

Just made a few tweaks to your code. Hopefully, this makes it clearer

body {
  margin: 0px;
  padding: 0px;
}
header {
  margin-top: -16px;
  position: fixed;
  background-color: #333;
  padding-left: .5em;
  width: 100%;
  font-size: 1em;
  padding-bottom: 1em;
  padding-top: 1rem;
  z-index: 100;
}
nav ul {
  position: fixed;
  margin-top: 16px;
  display: block;
  background-color: yellow;
  width: 10em;
}
main {
  margin-left: 15em;
}
<div id="wrapper">
  <header></header>

  <nav>
    <ul>
      <li href="#">1</li>
      <li href="#">2</li>
      <li href="#">3</li>
    </ul>
  </nav>

  <main>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>
    <p>aaaaaaaaaaaa</p>

  </main>
</div>

Answer №2

nav
{
 position: fixed;
 top: 48px;
 display:block;
 background-color: yellow;
 width: 10rem;
 }

Visit this Pen link for more

Ensure that wrapper div has a position:relative;, and the nav element has a position:fixed; style applied to it

Answer №3

To solve this issue, consider placing the navigation links within the header element under a nav tag and have the desired content for the top of the bar in a separate div. Then, you can style these elements differently to achieve your original design intent.

Here is a basic HTML structure:

<header>
    <div>
        <p>The content for the top of the bar!</p
    </div>
    <nav>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </nav>
</header>

Corresponding CSS styling:

header {
    position: fixed;
}
header div {
    background-color: orange;
    color: white;
    padding: 2em;
}
header nav {
    background-color: yellow;
}

Answer №4

The final closing tag should always be </div>, not </wrapper>, and the CSS property top 0; needs to be written as top: 0;.

To ensure that the navigation bar appears directly below the header, you need to specify a specific height for the header and use the same value for the top attribute in the nav styles. Here is an example:

header{
   position: fixed;
   top: 0;
   background-color: #333;
   height: 48px;
   box-sizing: border-box;
   padding-left: .5rem;
   width: 100%;
   font-size: 1rem;
   padding-bottom: 1rem;
   padding-top: 1rem;
   z-index: 100;
}

nav{
  position: fixed;
  top: 48px;

   display:block;
   background-color: yellow;
   width: 10rem;
}
<div id="wrapper">
  <header></header>

<nav>
   <ul>
      <li href="#">1</a></li>
      <li href="#">2</a></li>
      <li href="#">3</a></li>                   

   </ul>
</nav>

<main>
  <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 
   <p>aaaaaaaaaaaa</p> 

</main>
</div>

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

Is Javascript automatically generated by asp.net?

If I were to initialize a fresh VS project and paste the subsequent sample code into a freshly created page default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApplication1._default" %> <!DOCTYPE ...

javascripthtmlasp.net

Dynamic content display using AJAX

Having already tried to find a solution through Google with no success, I am at a loss. I have articles where a paragraph is initially displayed, followed by a "read more" link which reveals more content using JavaScript. However, this approach may slow do ...

phpjavascripthtmlajax

The most effective way to code overlapping html buttons

Can you help me figure out how to make clickable areas on my HTML5 web page without them overlapping? Here's what I'm trying to do: I want the red, blue, and green areas to be clickable links, but not overlap. For example, when clicking on the f ...

javascriptjqueryhtmlcsssvg

history.js - failure to save the first page in browsing history

I have implemented the history.js library to enable backward and forward browser navigation on an AJAX products page triggered by clicking on product categories. While I have managed to get this functionality working smoothly, I am facing a particular iss ...

javascriptjqueryhtml

The impact of adjusting the article's margin-top on the margin-top of

I want these two divs to have different positioning. The sidebar should remain fixed at the top. Why is the sidebar aligned with the article div instead of sticking to the top? body{ margin: 0; padding: 0; } div#sidebar{ background-color: yel ...

htmlcss

JavaScript functions smoothly on Google Chrome but is restricted on Internet Explorer

Experimenting with the code found on this website to conduct some testing. The javascript functions smoothly in Google Chrome and Firefox, but encounters issues in IE. Interestingly, when I run the html file in IE locally, it does work, but a warning pops ...

javascripthtmlinternet-explorerwebsocket

Proper application of article, aside, and header elements

Can someone help me with my page template setup? I have a sidebar on the left and main content area on the right. I'm wondering if I am using the article, aside, and header tags correctly. Also, should I attach classes/ids to html5 elements or is that ...

csshtml

Shifting and positioning the card to the center in a React application

I am currently constructing a React page to display prices. To achieve this, I have created a Card element where all the data will be placed and reused. Here is how it appears at the moment: https://i.stack.imgur.com/iOroS.png Please disregard the red b ...

javascripthtmlcssreactjs

Ways to stop CKEDITOR from automatically saving textarea or contenteditable content

I've integrated the CKEDITOR plugin for a format toolbar feature on my web application. It seems that the message shown above is a default one provided by CKEDITOR. My goal is to have users start with a blank textarea every time they visit the page, ...

javascriptjqueryhtmlbrowserckeditor

<div class="firstHeaderClass"> What exactly is this?

Struggling to eliminate a recurring header across all my webpages for customization, I've hit a roadblock in identifying the source of this repeating header. Upon stumbling upon this code snippet in the header section, my efforts to decipher its ...

phphtmlcssheader-files

A different option for incorporating interactive external content without using iframes

Excuse me for asking if this question has already been answered, but I was unable to find a solution that fits our specific needs. Is there a more effective method than using an iframe to embed external content in a website? Our objective is to provide a ...

jqueryhtmltwitter-bootstrapiframecoldfusion

Is there a way to alter the color of the weekday header in the Date picker calendar?

I'm working on enhancing the accessibility of my website by changing the default blue color of the weekdays header (highlighted area in the screenshot). I've attempted to modify the CSS code below, but no matter which color code I use, I can&apos ...

htmlcssangulardatepicker

Increase the border thickness around my title and add a border after an image

I'm encountering difficulties when trying to replicate the style showcased in this image using CSS. My specific challenge lies in creating a yellow horizontal line above the title "nossos numeros" and blue vertical lines between "Cursos", "Alunos", an ...

csstwitter-bootstrap-4

What is the best way to reset the size of an element in webkit back to its original dimensions?

I am having an issue with an element that changes to display absolute and covers its parent element on focus via javascript. However, when it goes back to its default state on blur, it does not return to its original position. This problem seems to only o ...

javascripthtmlcsswebkit

The content is not displayed in the d3 visualization

While examining the code of this visualization found at http://bl.ocks.org/mbostock/4062045, I noticed that the name from the JSON file is not displaying alongside the nodes. Even though the code includes: node.append("title").text(function(d) { return ...

javascripthtmljsonsvgd3.js

Unable to get PrependTo to remove itself when clicked

Below is a custom jQuery script I put together: $(function(){ $("a img").click(function() { $("<div id=\"overlay\"></div>").hide().prependTo("body").fadeIn(100); $("body").css({ ...

javascriptjqueryhtmlxhtml

The issue of the back button not functioning in the React Multi-level push menu SCSS has

I have been developing a mobile-friendly Multi-level push navigation menu for my website using dynamically generated links based on projects from my GitHub account. I found a push menu on CodePen here and am in the process of integrating it into React inst ...

cssreactjssassnavigationnext.js

Every time I click the highlight button, my navbar link inexplicably shrinks

I am struggling with adjusting the list style in my bootstrap navbar. Whenever I click on the highlight button, it squeezes my navbar and I'm not sure how to fix it. <div id="links"> <a href="index.html">Home& ...

htmlcssheaderbootstrap-5

Generate a unique identifier for the HTML content

Is there a more efficient way to assign unique id tags to certain words using vanilla javascript? For example: <p>All the king's horses ran away.</p> For instance, "All" would have the id "term1", "King's" would have "term2", and ...

javascripthtml

Text aligned at the center of the Y and X axis

I am looking to center my content along the Y axis instead of only on the X axis. To prevent the page from expanding beyond its current size, I have applied the following CSS: html { overflow-y: hidden; overflow-x: hidden } What I want to achieve is havi ...

javascriptjqueryhtmlcss