CSS: Best way to make floating navbar above hero image? [closed] - html

Question

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
This was probably asked in a different way before, but I couldn't find any that answer this specifically.
I want to have a navbar that on a normal page is ABOVE the page content and on one with a hero image looks like it's WITHIN the page content.
I typically use Jinja2 templates (for Django) so manually putting the navbar into the page content doesn't make a lot of sense.
I currently use negative margins to do this, but it feels a bit hacky (checkout code below)
EDIT: The second navbar (where the Navbar background is BEHIND the hero background, but the Navbar text is IN FRONT of the hero background) is how I want it to be.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
:root {
--primary: #21abde;
--navbar-height: 50px;
}
.navbar {
height: var(--navbar-height);
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: #333;
border: 1px solid grey;
color: white;
}
.navbar ul {
list-style: none;
display: flex;
}
.navbar ul a {
padding: 10px;
color: white;
text-decoration: none;
transition: .2s ease;
}
.navbar ul a:hover {
color: var(--primary);
}
.content,
.hero {
display: flex;
justify-content: center;
align-items: center;
}
.content {
background: darkcyan;
height: calc(100vh - var(--navbar-height));
}
.hero {
background: darkorange;
margin-top: calc(-1*var(--navbar-height));
height: 100vh;
}
<nav class="navbar">
<div class="logo">Navbar 1</div>
<div class="nav-menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</nav>
<div class="content">
Content
</div>
<nav class="navbar">
<div class="logo">Navbar 2</div>
<div class="nav-menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</nav>
<div class="hero">
Hero
</div>
Is there a better way to do this or is this the only way that doesn't involve manually including the navbar into the page's content (As I feel like this doesn't make a lot of sense for anything other than a static navbar)?

Answer 1

You're right. There is a better way. Just use position: fixed.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial;
}
:root {
--primary: #21abde;
}
.navbar {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: #333;
border: 1px solid grey;
color: white;
position: fixed;
width: 100%;
}
.navbar ul {
list-style: none;
display: flex;
}
.navbar ul a {
padding: 10px;
color: white;
text-decoration: none;
transition: .2s ease;
}
.navbar ul a:hover {
color: var(--primary);
}
.content,
.hero {
display: flex;
justify-content: center;
align-items: center;
}
.content {
background: darkcyan;
height: 100vh;
}
.hero {
background: darkorange;
height: 100vh;
}
<nav class="navbar">
<div class="logo">Navbar 1</div>
<div class="nav-menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</nav>
<div class="content">
Content
</div>
<nav class="navbar">
<div class="logo">Navbar 2</div>
<div class="nav-menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</nav>
<div class="hero">
Hero
</div>