Transparent fixed header with flexbox - html

Question

I've been trying to make a page with a fixed transparent header, using flexbox. At first, I found that somehow this causes a confliction (the fixed positioning and the flex) and the justify-content or align-items properties won't work on the child elements of the wrapper flex-fixed parent. The child elements of the fixed parent won't space appropriately.
But then I saw this https://templated.co/industrious, and somehow it works!
So I cannot understand why it doesn't work with my code. It seems to me I'm not doing it differently.
The header-fixed-flex div wraps the LOGO, NAV and search (svg) elements, but I cannot make the justify-content or align-items option to work on header-nav and navigation div's.
body {
height: 2500px;
}
.header-fixed-flex {
max-width: 150rem;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: flex;
justify-content: space-between;
transform: translate(19.2rem, 0);
}
.header_nav {
max-width: 155rem;
display: flex;
justify-content: space-around;
align-items: center;
}
.header_logo {
max-height: 9.7rem;
background: rgba(3, 12, 77, 0.4);
}
.header_link {
padding: 0.5rem;
}
.navigation {
background: rgba(191, 218, 218, 0.4);
display: flex;
}
.navigation_list {
list-style: none;
letter-spacing: 0.4rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
height: 100%;
}
.navigation_item:not(:last-child) {
margin-right: 3rem;
}
.navigation_link:link, .navigation_link:visited {
color: #fff;
text-decoration: none;
padding: 0.8rem;
}
.navigation_button {
border: none;
background: none;
display: flex;
align-items: center;
}
.navigation_search-input {
border: none;
background: rgba(255, 255, 255, 0.1);
outline: none;
width: 5rem;
}
.navigation_icon {
padding: 0.5rem;
width: 3rem;
fill: #fff;
}
.hero_img {
background: url(https://twimg0-a.akamaihd.net/a/1350072692/t1/img/front_page/jp-mountain#2x.jpg) top/cover;
height: 100vh;
}
<div class="header-fixed-flex">
<div class="header_nav">
<header class="header_logo">
LOGO
</header>
<nav class="navigation">
<ul class="navigation_list">
<li class="navigation_item">
Profile
</li>
<li class="navigation_item">
Services
</li>
<li class="navigation_item">
Articles
</li>
<li class="navigation_item">
Contact
</li>
</ul>
<button class="navigation_button">
<input type="text" class="navigation_search-input" id="search-query"/>
<label for="search-query" class="navigation_search_label"></label>
<svg class="navigation_icon"></svg>
</button>
</nav>
</div>
</div>
<section class="hero">
<div class="hero_img"></div>
</section>
Or a codepen link with scss
https://codepen.io/tantoniou/pen/QoGmba

Answer 1

Remove the header-fixed-flex element and apply this style on header_nav
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: 100;
display: flex;
justify-content: space-between;

Answer 2

It's really tough to determine what you want from your writeup with no design comp or wireframe provided, but my initial guess is things aren't happening as you expect because .header-fixed-flex only has one child. So maybe setting flex: 1 or just width: 100% on .header_nav will get things working as you like.