To enhance the navigation experience, it is recommended to relocate ov: hid from nav to leftUL and incorporate a dropdown in settings ~ li with pos:absolute positioning. A basic dummy dropdown has been included for your reference, feel free to customize it according to your preferences. Should you require any assistance, do not hesitate to reach out.
Here's the code snippet:
HTML
<nav class="userNav">
<div class="navCenter">
<ul class="leftUL navLeft">
<li><a href="#"><i class="icon-home"></i> <span>Home</span></a></li
><li><a href="#"><i class="icon-globe"></i> <span>Notifications</span></a></li
><li><a href="#"><i class="icon-envelope"></i> <span>Messages</span></a></li
><li><a href="#" class="active"><i class="icon-user"></i> <span>Me</span></a></li>
</ul>
</div>
<div class="navCenter">
<ul class="rightUL navRight">
<li class="search">
<form>
<input type="search" placeholder="Search Meeu">
<i class="icon-search"></i>
</form>
</li>
<li class="has-drop">
<a href="#">settings</a>
<div class="drop">
<ul>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</li>
</div>
</ul>
</div>
SASS
=placeholder
&::-webkit-input-placeholder
@content
&:-moz-placeholder
@content
&::-moz-placeholder
@content
&:-ms-input-placeholder
@content
body
font-family: sans-serif
.navLeft
float: left
.navRight
float: right
// Main signed in nav that user can see when they log in
.userNav
position: fixed
top: 0
left: 0
width: 100%
height: 68px
background-color: white
+single-box-shadow(0, 0px, 1px, 1.5px, rgba(0,0,0,0.1))
.navCenter
max-width: 1280px
margin: 0 auto
.leftUL
display: inline-block
padding: 18px 0 0 0
overflow: hidden
li
display: inline-block
a
padding: 30px 12px 15px 12px
border-bottom: 4px solid #5A5A5A
color: #5A5A5A
text-decoration: none
+single-transition(all, .15s, ease-in-out)
&:hover, &.active
padding-bottom: 11px
border-color: #21AAEA
color: #21AAEA
i
font-size: 24px
span
font-size: 14px
vertical-align: 4px
.rightUL
display: inline-block
padding: 12.5px 0 0 0
.has-drop
position: relative
&:hover
.drop
display: block
.drop
display: none
position: absolute
top: 100%
right: 0
width: 150px
background: blue
padding: 20px
border-radius: 10px
li
display: block
a
color: #fff
.search
display: inline-block
form
i
position: relative
left: -32px
color: #292f33
font-size: 14px
input
width: 200px
height: 35px
padding: 0 35px 0 10px
border: 1px solid #e1e8ed
outline: none
font-size: 12px
line-height: 1
background-color: #f5f8fa
@include placeholder
padding: 2.5px 0 0 0
color: #292f33
+border-radius(21px)
+single-transition(background-color, .15s, ease-in-out)
&:focus
background-color: transparent
@include placeholder
color: #8899A6
li
display: inline-block
padding-right: 10px
a
color: #5A5A5A
text-decoration: none
font-size: 14px
+single-transition(all, .15s, ease-in-out)
&:hover, &.active
color: #21AAEA
CodePen Link