How to set fixed positions in dropdowns respecting the original layout? - html

Question

I'm creating a header that will be composed by different redirection links, and some of the cases will be some dropdown elements composed by several links that will be shown when clicking on the main link.
here si my html
<div id="row">
<div class="col-xs-12">
<header>
<nav class="navbar navbar-expand-lg navbar-light header">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav menu">
<li class="nav-item">
<a class="nav-link">PERSONAL INFO</a>
</li>
<li class="nav-item">
<a class="nav-link menu-link-toggle" v-on:click="displayAnimalList = !displayAnimalList">PERSONAL FORM</a>
<ul class='dropdown-menu' v-show="!displayAnimalList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>FORM DATA</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >AUTOCOMPLETE</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class='menu-link menu-link-toggle' v-on:click="displayServiceList = !displayServiceList">SERVICES</a>
<ul class='dropdown-menu' v-show="!displayServiceList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >LA CRÉMATION PRIVÉE</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' href="https://www.esthima.fr/incineration-reference">PERSONAL S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>COMPANY S</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >FULL S INFO</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link ">SHOP</a>
</li>
<li class="nav-item active">
<router-link class="nav-link" to="/devis">TARIFS ET DEVIS </router-link>
</li>
<li class="nav-item">
<a class='menu-link menu-link-toggle' v-on:click="displayContactList = !displayContactList">CONTACT</a>
<ul class='dropdown-menu' v-show="!displayContactList">
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link'>MAIL</a>
</li>
<li class='dropdown-menu-item'>
<a class='dropdown-menu-link' >PHONE</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
</div>
</div>
and here mi css
.header {
display: flex;
justify-content: center;
align-items: baseline;
}
.menu {
list-style: none;
display: flex;
}
.nav-item {
padding: 25px;
}
.menu-link-toggle {
cursor: pointer;
}
.dropdown-menu {
list-style: none;
}
a {
font-size: 14px;
color: #D53865;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
.added {
display: none;
}
I have it laid out as it should be, but the problem arises when I click on the drop-down menus, which pushes the rest of the elements of the header and unlays them. I have tried to introduce an absolute position to the elements that make up the header but it does not respect the original layout as shown in the following link
https://codepen.io/carlosurra/pen/YzqXjdP
Greetings and thanks in advance for your time and help

Answer 1

You should be able to fix that by adding position: relative; to the class .nav-items and position: absolute; to the class .dropdown-menu
here is the updated css
.header {
display: flex;
justify-content: center;
align-items: baseline;
}
.menu {
list-style: none;
display: flex;
}
.nav-item {
padding: 25px;
position: relative;
}
.menu-link-toggle {
cursor: pointer;
}
.dropdown-menu {
list-style: none;
position: absolute;
}
a {
font-size: 14px;
color: #D53865;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none;
}
.added {
display: none;
}