Fixed menu vanishes when using bottom:0 position

Testing this in Chrome: I want the menu to stick to the bottom left. It displays correctly when bottom: 0 is not used, but using top makes it work. What might be causing this issue?

.mobile-menu {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 30px;
  width: 80px;
  z-index: 999;
  background-color: red;
}
<div class="wrapper">
  <nav class="mobile-menu">testing this menu</nav>
  <header class="header">
    <div class="main-logo">
      <object data="svg/main-logo.svg" type="image/svg+xml">
        <img src="fallback.jpg" />
      </object>
    </div>
    <nav class="main-nav">
      <ul>
        <li><a href="">About</a>
        </li>
        <li><a href="">Services</a>
        </li>
        <li><a href="">Contact</a>
        </li>
      </ul>
    </nav>
  </header>
</div>

Answer №1

To enhance the design, set .wrapper to have a position: relative and .mobile-menu to have a position: absolute. For better clarity on the issue at hand, I included some content below your header. In this scenario, the green menu is considered good, while the red menu is deemed bad.

Resolution

  • In the example provided, I have renamed the red menu to: .mobile-menuOriginal
  • I duplicated the .mobile-menu element and adjusted the style to have a background-color: green along with a position: absolute

Explanation

  • position: fixed positions an element in relation to the viewport, ensuring that bottom: 0 always aligns it at the bottom of the screen.

  • position: relative situates an element based on its original position. By setting .wrapper to have position: relative without specific coordinates like top, right, left, or bottom, the element stays where it is. The reason for this adjustment is to remove flow restrictions from .wrapper.

  • position: absolute places an element in reference to its parent. Placing .mobile-menu within absolute positioning ensures it is positioned inside the boundaries of .wrapper, as .wrapper serves as the parent and the closest positioned element. It's important to note exceptions around positioned parents; consider reading this article for clarification before delving deeper into the topic.

Revision

@t.niese adds further insights:

[...]The reason why .wrapper needs this is so it can be out of normal flow.[...] technically, being 'out of flow' might be misleading, as elements with relative positioning merely experience visual displacement but still occupy the same space in the flow and are influenced by their surroundings unlike those with absolute positioning which indeed get removed from the flow.

.wrapper {
  position: relative;
}
.mobile-menu {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 30px;
  width: 80px;
  z-index: 999;
  background-color: green;
}
.mobile-menuOriginal {
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 30px;
  width: 80px;
  z-index: 999;
  background-color: red;
}
<!doctype html>
<html>

<head>
</head>

<body>
  <div class="wrapper">
    <nav class="mobile-menu">testing this menu</nav>
    <nav class="mobile-menuOriginal">testing this menu</nav>
    <header class="header">
      <div class="main-logo">
        <object data="svg/main-logo.svg" type="image/svg+xml">
          <img src="fallback.jpg" />
        </object>
      </div>
      <nav class="main-nav">
        <ul>
          <li><a href="">About</a>
          </li>
          <li><a href="">Services</a>
          </li>
          <li><a href="">Contact</a>
          </li>
        </ul>
      </nav>
    </header>
  </div>


  <section>
     ...
   <p>Content</p>
  </section>
  

  <footer>
    <h3>Footer</h3>
  </footer>
</body>

</html>

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

Limiting the types of files a user can access through a web browser

Hey there! I have a unique question that sets it apart from others, as it involves restricting file types for users with a browser popup. My goal is to prevent users from selecting certain file types before they choose a file. I've come across some s ...

What is the method for including HTML special characters in d3.js?

I am attempting to incorporate the degree symbol in my HTML code using ° const degreeNum = d3 .select(`#windBox${order}`) .append("text") .attr("x", 250) .attr("y", 130) .style("font", "bold 50px sans-serif") ...

javascript - Alternate text colors several times within specified color ranges

Seeking assistance with changing the text color multiple times from #627CA9 to #FFFFFF and vice versa. Here's what I've tried: function changeColor(id) { var x = document.getElementById(id); if (document.getElementById(id).style.color = " ...

How can I synchronize two webkit-animations at the same speed but with one covering a greater distance?

[Update: The solution involved creating two containers, with the second animation container configured to have left: 100%.] I designed a simple animation that moves a large gif image across the page horizontally, where the width of the gif is 1536px. Sin ...

The loading icon in JavaScript failed to function when JavaScript was disabled in the browser

On my blogger website, I tried using JavaScript to display a loading icon until the page completely loads. However, this method did not work when JavaScript was disabled on the browser. Only CSS seems to provide a solution. document.onreadystatechange = ...

Having an issue with Jquery selector where the text does not match

HTML Code <select id="myDropdown"> <option selected="selected" value="0">default</option> <option value="1">bananas</option> <option value="2">pears</option> </select> Javascript Function setDr ...

Creating Consistent Alignment for Mid-Row Text in HTML with Tab-Like Precision

I am currently in the process of creating my own HTML email signature and I want to make sure that all the phone numbers are properly aligned. Phone: (234) 567-8910 Cell:     (234) 567-8910 Fax:     (234) 567-89 ...

The `d-flex flex-column` is causing the image within the div to be hidden

The setup looks like this: <div className="d-flex flex-column"> <div> Text </div> <div style={{ backgroundImage: 'url(...)' }}> </div> </div> The URL is functioning correctly. The div element is ...

Creating an HTML table from a JSON string with AngularJS

I am completely new to angularjs and have been delving into it for the past few days. I now need to convert a JSON string from a REST endpoint into tabular data. Below is the code I've been working on. $scope.getDataCatalogue = function(){ $ ...

Adjust the color of text as you scroll

Could you provide guidance on changing the color of fixed texts in specific sections of my portfolio website? Unfortunately, I can't share my lengthy code here, but would greatly appreciate it if you could illustrate with examples. Here's a refer ...

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 ...

"Incorporating Social Media Icons into Your Website using HTML and CSS

Looking to recreate a design featuring social media icons (LinkedIn, Facebook, Google Plus, Twitter) using HTML and CSS. https://i.sstatic.net/016im.png Although I have managed to create something similar in fiddle with font-awesome, it's not an exa ...

A div element with a z-index of 9 remaining below another element with a z-index of 1

Even with a higher z-index, my <h4> and <a> elements are not visible above the background. <section class="no-padding main-slider mobile-height wow fadeIn"> <div class="swiper-full-screen swiper-container height-100 width-100 whit ...

HTML Button to Populate Text in Textarea Box

I'm trying to figure out how to display HTML inside a textarea box for a link. I've managed to get it working perfectly, but I want it to show <a href="https://youtube.com">Link</a> instead of "Code for Link in HTML." Is th ...

The background image is not properly aligned

I am struggling to set an image as the background for my first ASP.NET Core project. However, when I add the image, it also appears like a footer on the page instead of being positioned between the header and footer sections. Here is a picture of the back ...

Expanding the outer div with Jquery's append() function to accommodate the inner div elements perfectly

I am facing an issue where my outer div does not expand automatically to fit the elements I append inside it using jQuery. The structure of my div is as follows: <div class="well" id='expand'> <div class="container"> < ...

Tips on creating responsive email designs

What is the best way to make emails responsive in a php application when external css files are not supported and media queries cannot be included inline? Looking for alternatives to make emails responsive without external css files and media queries, any ...

Fluid imitation pillars with a decorative outer edge

Looking to create a modern, sleek 2-column HTML5 interface with a left sidebar and main content area on the right. Backwards compatibility is not an issue as all users will be using the latest versions of Chrome or FF. The goal is to give the sidebar a ba ...

Weird Android CSS problem: mysterious white overlay appearing in all browsers, both zoomable and touch-sensitive

After testing my website in various browsers, I discovered that while it looks fine on most platforms, there is a persistent issue on Android devices. The problem occurs when the user scrolls down around 30% of the page - a white overlay appears and exten ...

Creating a bezel design in CSS or Vue: A step-by-step guide

Embedding: https://i.sstatic.net/YfvQP.png Is there a CSS property that can be used to create the same angle as shown in the layout? I looked everywhere in the program but couldn't find this specific property. Tried searching here !: https://i.s ...