Having trouble positioning a search bar in my nav bar, I'd like it to show on the right side without overlapping any other elements. Tried relative and absolute positioning with no success so far.
Any assistance would be greatly appreciated, thank you! :)
https://i.stack.imgur.com/qYPHm.png
Codepen link - version= https://codepen.io/Teamkhaleesi/pen/gOoNJJy
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
html,
body {
margin: 0;
padding: 0;
height: auto;
font-family: 'Poppins';
box-sizing: border-box;
background-color: rgb(236, 241, 236);
}
body {
margin-bottom: 0;
padding: 0;
}
.search-bar {
float: right;
width: 200px;
height: 40px;
}
.search-bar .search-icon {
position: absolute;
right: 0px;
/*adjust this*/
top: 0px;
/*adjust this*/
background-color: red;
}
nav {
width: 100%;
height: 140px;
background-color: #333;
color: #fff;
text-align: center;
}
nav p {
font-family: 'poppins';
color: white;
font-size: 40px;
line-height: 40px;
padding-top: 2%;
text-align: center;
}
nav ul {
margin: 0px auto;
display: inline-block;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: 'poppins';
text-transform: uppercase;
color: white;
font-size: 20px;
text-decoration: none;
padding: 0px 30px;
}
nav ul li a:hover {
color: black;
}
nav ul li ul {
display: none;
position: absolute;
padding: 10px;
background-color: rgb(215, 209, 209);
border-radius: 1%;
z-index: 1;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
}
nav ul li ul li a {
padding: 8px 10px;
color: black;
}
nav ul li ul li a:hover {
background-color: rgb(120, 118, 118);
transition: ease-in-out 0.2s;
}<nav>
<p>Book PRESS</p>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Books <i class="fa-solid fa-caret-down"></i></a>
<ul>
<li><a href="">Young Adult</a></li>
<li><a href="">Adult</a></li>
<li><a href="">Non-Fiction</a></li>
</ul>
</li>
<li><a href="#">Authors <i class="fa-solid fa-caret-down"></i></a>
<ul>
<li><a href="">Our Authors</a></li>
<li><a href="">Book Tours</a></li>
<li><a href="">Events</a></li>
</ul>
</li>
<li><a href="#">About Us <i class="fa-solid fa-caret-down"></i></a>
<ul>
<li><a href="">Our Team</a></li>
</ul>
<li><a href="#">News</a></li>
</li>
<li><a href="#">Contact Us <i class="fa-solid fa-caret-down"></i></a>
<ul>
<li><a href="">Submissions</a></li>
<li><a href="">Permissions</a></li>
<li><a href="">Translation</a></li>
<li><a href="">Press</a></li>
<li><a href="">Hiring</a></li>
<li><a href="">Contact</a></li>
</ul>
<li class="search-bar">
<form class="form"> <input type="text" name="Search" placeholder="Search"> <button type="submit"> </button> </form>
</li>
</li>
</nav>