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>