In the process of developing a fixed top navbar, I encountered an issue while trying to add right side icons and additional content. The goal is to include two icons, as shown in this example: example link, along with profile and cart information on the right side of the top navbar. Despite my efforts, I have been unsuccessful in fixing this issue. Any assistance in resolving this problem would be greatly appreciated. https://i.stack.imgur.com/Q0PfE.png
Dashboard.vue
<template>
<div class="main">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<img src="../assets/education.png" alt="notFound" />
</div>
<ul class="nav navbar-nav">
<li>
<p>Bookstore</p>
</li>
</ul>
<div class="input-group">
<i class="fas fa-search"></i>
<div class="form-outline">
<input type="search" class="form-control" placeholder='search...' />
</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a> <i class="far fa-user"></i></a></li>
<p>profile</p>
<li><a><i class="fas fa-cart-plus"></i></a></li>
<p>cart</p>
</ul>
</nav>
</div>
</template>
<style lang="scss" scoped>
@import "colors";
.navbar-default {
background: $redish_brown;
height: 60px;
}
li p {
margin-top: 5px;
margin-left: -1250px;
width: 91px;
height: 26px;
text-align: left;
font: normal normal normal 18px/26px Roboto;
letter-spacing: 0px;
color: $pale_white;
text-transform: capitalize;
opacity: 1;
}
img {
background: transparent 0% 0% no-repeat padding-box;
opacity: 1;
width: 31px;
height: 24px;
margin-top: -12px;
margin-left: 194px;
}
.input-group{
margin-left:345px;
}
input[type="search"]{
width: 490px;
height: 33px;
margin-top:-40px;
background: #FCFCFC 0% 0% no-repeat padding-box;
border-radius: 3px;
margin-left:3px;
opacity: 1;
}
// .fa-user{
// margin-left:1064px;
// width: 31px;
// height: 36px;
// opacity: 1;
// margin-top:-25%;
// }
.input-group {
display: flex;
align-items: center; // to center the icon vertically
}
.input-group .fas {
position: absolute;
margin-left: 8px;
}
.fa-search{
margin-top:-40px;
opacity: 1;
}
.input-group input[type="search"] {
padding: 8px 8px 8px 32px;
}
a i{
// display:flex;
float:right;
}
</style>