I've been hard at work on my webpage, creating a top navigation bar with links and more. However, I've hit a snag while trying to add a settings button. Everything seems fine until I try to position it, then the button stops working. I suspect it's due to the padding, but I'm not sure how to resolve it. The Padding Covers The Setting Button Code1
/*Navigation Bar Below*/
nav{
width: 100%;
height: 50px;
background-color: #aeaeae;
border-bottom: 5px solid #8d8d8d;
}
#list1{
}
#list1 li{
list-style: none;
display: inline-block;
line-height: 50px;
}
#list1 li a{
display: block;
text-decoration: none;
font-size: 14px;
font-family: MPLUS;
color: #ffffff;
padding: 0 20px;
}
#list1 li a:hover{
color: dodgerblue;
}
.inputWithIcon {
float: right;
padding-right: 37px;
}
/*Channel ID Search Below*/
input[type=text]{
width: 100%;
border: 2px solid #aaa;
border-radius: 4px;
margin: 8px 0;
outline: none;
padding: 8px;
box-sizing: border-box;
transition: .3s;
}
input[type=text]:focus {
border-color: dodgerblue;
box-shadow: 0 0 8px 0 dodgerblue;
}
input[type=text]{
width:100%;
border:2px solid #aaa;
border-radius:4px;
margin:8px 0;
outline:none;
padding: 8px;
box-sizing:border-box;
transition:.3s;
}
input[type=text]:focus{
border-color:dodgerBlue;
box-shadow:0 0 8px 0 dodgerBlue;
}
.inputWithIcon input[type=text]{
padding-right: 30px;
}
.inputWithIcon{
position:relative;
}
.inputWithIcon i{
position:absolute;
right: 34.5px;
top:8px;
padding: 9px 10px;
color:#aaa;
transition:.3s;
cursor: pointer;
}
.inputWithIcon input[type=text]:focus + i{
color:dodgerBlue;
}
.search1{
padding-right: 37px;
}
/* Menu Button Below*/
.box-shadow-menu {
position: absolute;
padding-right: 20px;
}
.box-shadow-menu:before {
content: "";
position: absolute;
right: 0;
top: 0.25em;
width: 1em;
height: 0.15em;
background: black;
box-shadow:
0 0.25em 0 0 black,
0 0.5em 0 0 black;
}
.SettingsButton1{
position:absolute;
right: 25px;
top:8px;
padding: 9px 10px;
}<div id="NavBar">
<nav>
<div class="SettingsButton1">
<i class="box-shadow-menu" aria-hidden="true" id="button" onclick="ViewsDisplay1()"></i>
</div>
<div class="Search1">
<div class="inputWithIcon">
<input type="text" placeholder="Channel ID" id="chnlname">
<i class="fa fa-search" aria-hidden="true" id="update"></i>
</div>
</div>
<ul id="list1">
<li><a href="#">Liker</a></li>
<li><a href="index.html">Live Count</a></li>
<li><a href="#">Logan IS Dumb</a></li>
</ul>
</nav>
</div>