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

Vue.Js allows developers to easily set a default selected value in a select dropdown menu

Having trouble with getting the default selected value using select in VueJs. I've attempted two different approaches: Using id and v-model fields in the select like this: <select v-model="sort_brand" id="sort-brand" class="form-control"> ...

htmlselectvue.jshtml-select

What is the best method for generating a comprehensive list of xpaths for a website utilizing Python?

Method I Attempting to generate a hierarchical tree of all the xpaths within a website () using Python, I initially aimed to acquire the xpath for the branch: /html/body with the following code: from selenium import webdriver url = 'https://startpag ...

pythonhtmlseleniumxpathtree

Changing the CSS property from "display: none" to "display: block" using JavaScript causes all the div elements to overlap

My issue involves several radio inputs where clicking one should reveal a hidden div containing information. However, when this div appears, it overlaps with the footer instead of staying positioned between the footer and radio input as intended. I am str ...

javascripthtmlcss

Pressing a key once causing two actions when managing content in a separate window

Issue: I am facing a problem where I receive double keypresses from one key event when the event updates content in two separate windows. (Please keep in mind that I am not an expert in this field and appreciate your understanding.) I am attempting to use ...

javascriptjqueryhtml

I'm trying to find a way to access a particular field within an HTML document using JavaScript in Node.js. Can anyone

<Response> <SMSMessageData> <Message>Delivered to 1/1 Total Cost: NGN 2.2000</Message> <Recipients> <Recipient> <number>+9109199282928</number> <cost>NGN 2.2000&l ...

javascripthtmlnode.jsweb-scraping

Collapsible Span with Maximum Width in Unique Twitter Bootstrap

UPDATED If I assign a max-width value to the .container element, it disrupts the alignment of my spans. <div class="container" style="max-width:940px"> <div class="row"> <div class="span4" style="background-color:#F00">1</div& ...

htmlcsstwitter-bootstrap

Creating a button that seamlessly adapts to all browsers

I am encountering an issue with the positioning of a chat button on my website. Despite my efforts, the button does not remain in the desired location across different browsers and screen resolutions. The browser zoom also causes inconsistencies in the but ...

cssbrowsercross-browserzooming

Bootstrap: Retrieve an image from a modal

I am working on a modal that contains a variety of selectable images. When an image is clicked, I want to change the text of the button in the modal to display the name of the selected image. Additionally, I would like to grab the selected image and displa ...

javascripthtmldjangotwitter-bootstrap

HTML forms are larger in size on web pages than in Internet Explorer

https://i.stack.imgur.com/bUPtm.png I have posted the issue, and it is predominantly visual in nature. When viewed on a web browser within a C++ interface, the HTML appears significantly distorted. ...

htmlc++formsvisual-studiowebbrowser-control

Enhance your search experience with AJAX-powered search boxes

I need to implement multiple textboxes on my webpage, each with its own search query to retrieve data from the database. While I have successfully implemented this for one textbox, I am facing difficulties getting it to work for two or more textboxes. He ...

phphtmlajax

"Strategies for using Selenium in Python to simulate clicks without relying on class, id, or name attributes

I am currently attempting to locate the "X" button and click on it, but I am struggling to find a way to do so. Below is the HTML code for the element: <div style="cursor: pointer; float:right; border-radius: 3px; background-color: red; font-size: ...

javascriptpythonhtmlselenium

When the enter key is pressed in a contenteditable div, line breaks are disregarded

Is there a way to ensure that when the return key is pressed to start a new line for a post, the output actually starts on a new line? I've been having trouble with this and would like to know the most common solution. Check out the demo below for te ...

javascriptphphtmlcss

I am in search of a way to implement horizontal scrolling in Bootstrap 4

I am trying to implement a horizontal scroll feature in Bootstrap 4 with the following code, but I'm having difficulty achieving it. <div class="scroll-horz"> <div class="row"> <div class="col-md-4"> Test </div> < ...

htmlcssbootstrap-4

The footer covers the content when the content fills the entire screen

I'm having trouble getting my .content_pro to stick to the top of the footer, regardless of screen resolution. When I set the height to 100%, it ends up underneath the footer. I've been struggling with this for hours but can't seem to make i ...

htmlcssfooteroverlapoverlapping

What could be preventing my HTML replacement assignment from functioning properly?

Whenever a choice is made, I want to substitute the current content with different content. My current attempt is to update the content from "HuckFinn" to "Tom Sawyer will be added later" when the user selects "Tom Sawyer" from the drop-down menu. However, ...

jqueryhtmlvisual-studio-2013asp.net-webpages

What is the method for changing the color of a specific section of a header?

My header design consists of two lists of buttons, one on the left and one on the right. I am looking to customize the background color of the "Sign Up" button to make it stand out. Below is an example of what I want and the current design of my header alo ...

htmlcssweb-deployment

Creating a triangle with SVG polygon: A step-by-step guide

I'm attempting to create a bottom triangle using SVG polygons, similar to the image below: https://i.stack.imgur.com/571FM.png Here is what I have tried so far: <svg xmlns="http://www.w3.org/2000/svg" height="150px" width="100%" viewBox="0 0 ...

htmlsvgpolygonclip-path

What is the best way to clear an XML or table?

As I delve into learning Javascript, I've been experimenting with different approaches to achieve a specific functionality. I'm trying to implement a button that can toggle or hide XML data in a table. My attempts so far have involved adding anot ...

javascripthtmlxmlbuttononclick

Mouseover Magic: Text and Captions Come Alive with JQuery

I am trying to create a rollover effect that displays text when the user hovers over an image. Despite researching numerous tutorials, I have found limited resources on incorporating text or captions using jQuery. Most of the available tutorials focus on C ...

jqueryhtmlcssrollover

Nested divs with independent scrolling capabilities

I am interested in developing a gantt chart that displays days, months, and years at the top with tasks listed below. Here is my progress so far: https://i.stack.imgur.com/tr5y4.png In the image above, the scroll-x functionality works on everything incl ...

htmlcssscrolloverflowparent-child