Position Absolute/Relative Nightmare - html

Question

I'm almost crying. Okay, not that much. But I spent almost three days trying to find a solution for this problem and I can't find anywhere.
I'm using Bootstrap, so only a part of the CSS is available as the main classes I use the default from Bootstrap.
This is what I want to achieve:
This is what it's looking like right now (both mobile and desktop)
The live website: http://acessogestaocontabil.com.br/
And this is the code:
HTML
<!-- navHeader -->
<div class="container-fluid" id="header">
<div class="container d-xl-none">
<img src="img/footerLogo.png" class="img-fluid" alt="">
</div>
<div class="midias d-none d-xl-block">
<nav>
<i class="fab fa-instagram"></i> | <i class="fab fa-facebook-f"></i>
</nav>
</div>
<div class="container d-none d-xl-block">
<div class="row">
<div class="col-9">
<nav class="nav">
<li class="nav-item"><i class="fas fa-home"></i></li>
<li class="nav-item">Sobre</li>
<li class="nav-item dropdown">
Consultoria e Assessoria
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
Assessoria Contábil
Pessoas
Fiscal
Tributária
</div>
</li>
<li class="nav-item">Blog</li>
<li class="nav-item">Contato</li>
</nav>
</div>
</div>
</div>
</div>
CSS/SASS
#header {
background-image: url('../img/bg-topo-desk.png');
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
min-height: 195px;
}
#header .nav {
background: url('../img/bgHeaderMenu.jpg') no-repeat #13165f;
position: absolute;
transform: none;
width: 100%;
top: 133px;
right: -184px;
overflow: hidden;
padding: 0px 20px;
}
#menuHeader {
position: relative;
right: 210px;
}
#header .nav a {
color: #FFF;
text-transform: uppercase;
}
#header .nav .nav-item {
border-right: 1px solid #3249b7;
}
#header .midias {
background: url('../img/bgSocialHeader.jpg') no-repeat #3d5cc7;
height: 40px;
position: absolute;
top: 133px;
right: 0px;
z-index: 1;
padding: 6px 180px 5px 60px;
}
#header .midias a {
color: #FFF;
}
// Small devices (landscape phones, less than 768px)
#media (max-width: 767.98px) {
#header .midias {
display: none;
}
}
// Large devices (desktops, less than 1200px)
#media (max-width: 1199.98px) {
#header .nav {
display: none;
}
}
The logo is inserted into the image, so it will show as a normal background in desktop. In mobile, I change to the a inserted image, with a link. I know is not the best scenario but it's what I was capable to do.
The navigation menu is the main problem. It looks okay in some resolution, but when I try to resize, it just breaks. I tried everything: two divs, two backgrounds, flexbox, position absolute, position relative and everything just fails.
Does anyone knows how to solve it? :(

Answer 1

For what I can suggest is - move the background to its own element, then you can remove all position: absolute declarations, as the other elements will neatly fall below it. As the image should, as I understand, displayed whole, the easiest way is to just use <img src="/img/bg-topo-desk.png" alt="header" style="width:100%"/>. (of course you should move the width declaration to css).