I have come across many similar questions but have yet to find a solution to my specific issue. I am struggling to make this menu dropdown responsive with the page due to its absolute positioning. Using JS is an option for me as well. Any help or guidance would be greatly appreciated.
header{
nav{
min-width: 280px;
max-width: 479px;
margin: 0 auto;
clear: both;
position: relative;
.logo{
padding: 13px 0 10px 9px;
float: left;
}//End of logo
ul{
list-style-type: none;
border-bottom: 2px solid $white;
margin-bottom: 6px;
li{
line-height: 23px;
.nav-img{
line-height: 50px;
float: right;
margin-right: 18px;
}
.nav-content{
position: absolute;
top: 60px;
overflow: hidden;
background-color: $dropdownColor;
//margin: 0 auto;
min-width: 280px;
//width: 100%;
max-width: 440px;
padding: 0px 20px;
max-height: 0px;
.arrow{
float: right;
padding-top: 13px;
}
.nav-sub{
.second-menu{
li{
font-size: 12px;
display: inline-block;
line-height: 8px;
}
li+li:before {
padding: 2px;
color: $white;
content: "/\00a0";
}
}
a{
display: inline-block;
text-decoration: none;
color: $white;
font-weight: bold;
}
input{
width: 100%;
padding: 5px;
border: none;
background-image: url("../images/search_icon.png");
background-repeat: no-repeat;
background-position: center right 10px;
margin: 15px 0;
}
}
}
}
li:first-child{
padding-top: 13px;
}
li:last-child{
padding-bottom: 20px;
}
}//End of menu
}//End of nav
}//End of header <header>
<nav>
<div class="logo">
<a href="#"><img src="./images/logo.png" alt="Error loading image!"></a>
</div>
<ul>
<li>
<a href="#" class="nav-img"><img src="./images/menu_shape.png" alt="Error loading image!"></a>
<div class="nav-content">
<a class="arrow" href=""><img src="./images/dropdown_arrow.png" alt="Error loading image!"></a> <div class="nav-sub">
<ul>
<li><a href="#">About Us</a>
<!--<ul>
<li><a href="">Production</a></li>
<li><a href="">Energy & Commodities</a></li>
<li><a href="">Transport</a></li>
<li><a href=""></a>Industrial Services</li>
</ul>-->
</li>
<li><a href="#">Divisions</a></li>
<li><a href="#">Investors</a></li>
<li><a href="#">Corporate Responsibility</a></li>
</ul>
<ul class="second-menu">
<li><a href="">Home</a></li>
<li><a href="">Media Centre</a></li>
<li><a href="">Careers</a></li>
<li><a href="">Contact Us</a></li>
</ul>
<input type="search" placeholder="Search">
</div>
</div>
</li>
</ul>
</nav>
</header>Below are the images for reference:
https://i.sstatic.net/jr27W.png
https://i.sstatic.net/79HiA.png
The width can be defined in pixels, but responsiveness may be compromised. An alternative solution is needed.