I am currently facing some challenges while creating a simple navigation bar from scratch. I am struggling with setting specific widths, especially wanting .navbarDropBtn to align its width with .navbarMain. However, it seems to only match the width of the text. I have experimented with changing the order in which they appear in the HTML, but I require .navbarText to be positioned on top due to the smooth opacity transition I am implementing for gradient transitions.
My main query is how can I set the width to be 100% of a parent's parent element. I prefer not to use fixed pixels (px) as it may lead to issues across different screen sizes, and even setting a specific value such as 120% might pose similar problems.
.navbarBody {
width:100%;
height: 46px;
position: sticky;
}
.navbarButton, .navbarBody {
background: linear-gradient(0deg, #2a2a2a, #4a4a4a);
z-index: 100;
}
.navbarButton, .navbarMain {
float:right;
text-align:center;
padding: 14px 16px;
color: #fff;
position:relative;
}
.navbarButton:hover, .navbarMain:hover {
cursor: pointer;
color:black;
transition: .25s;
}
.navbarText {
width:100%;
height:100%;
position: relative;
}
.navbarButton:hover .navbarText {
color:black;
}
.navbarMain {
background: linear-gradient(0deg, #296a29, #4aca4a);
}
.navbarDropBtn {
width: 100%;
height: 100%;
background-color: white; /*example only */
}
/*hover effect*/
.navbarButton::before, .navbarMain::before {
content: "";
opacity:0;
background: linear-gradient(0deg, #999, #fff);
top:0px;
left:0px;
position: absolute;
width:100%;
height:100%;
}
.navbarMain::before {
background: linear-gradient(0deg, #3a8a3a, #aafaaa);
}
.navbarButton:hover::before, .navbarMain:hover::before {
opacity:1;
transition:opacity .25s, content .05s;
}
<div class="navbarBody">
<div class="navbarMain" onclick="dropBtn()">
<div class="navbarText">
<div class="navbarDropBtn">
Positioned at far right
</div>
</div>
</div>
<div class="navbarButton">
<div class="navbarText">
Test 1
</div>
</div>
<div class="navbarButton">
<div class="navbarText">
Test 1 1
</div>
</div>
</div>