Menu
I want to create a navigationbar with a inputfield. On the right side (inside the inputfield), I want to display a glass. I have this code here:
*{
margin: 0px;
padding: 0px;
}
body{
background-color: rgb(226, 220, 220);
}
nav{
width: 100%;
background-color: white;
}
nav > .nav_ul{
width: 1000px;
margin: 0px auto;
}
nav > .nav_ul > .nav_li{
display: inline-block;
margin: 10px 0px;
}
nav > .nav_ul > .nav_li > .nav_a{
text-decoration: none;
padding: 7px;
background-color: #5238DF;
display: block;
color: white;
}
nav > .nav_ul > .nav_search{
position: relative;
display: inline-block;
}
nav > .nav_ul > .nav_search > .nav_searchfield{
padding: 7px;
}
nav > .nav_ul > .nav_search > .fa_search{
}<!DOCTYPE>
<html>
<head>
<link href="backbone/general.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<ul class="nav_ul">
<li class="nav_li"><a href="#" class="nav_a">Link 1</a></li>
<li class="nav_li"><a href="#" class="nav_a">Link 2</a></li>
<div class="nav_search">
<span class="fa fa-search"></span>
<input class="nav_searchfield" type="text" placeholder="Search ..." />
</div>
<li class="nav_li"><a href="#" class="nav_a">Link 3</a></li>
</ul>
</nav>
</body>
</html>I use fontawesome for the image, but the image isn't displayed. What did i wrong? Here is a image:
970
This solve your problem:
nav > .nav_ul > .nav_search > .nav_searchfield{
padding: 7px 28px 7px 7px;
}
nav > .nav_ul > .nav_search > .fa-search{
position: absolute;
top: 6px;
right: 10px;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/k433otdg/
121
Set a custom margin for the icon. .fa-margin { margin-left: -20px; }
* {
margin: 0px;
padding: 0px;
}
body {
background-color: rgb(226, 220, 220);
}
nav {
width: 100%;
background-color: white;
}
nav > .nav_ul {
width: 1000px;
margin: 0px auto;
}
nav > .nav_ul > .nav_li {
display: inline-block;
margin: 10px 0px;
}
nav > .nav_ul > .nav_li > .nav_a {
text-decoration: none;
padding: 7px;
background-color: #5238DF;
display: block;
color: white;
}
nav > .nav_ul > .nav_search {
position: relative;
display: inline-block;
margin: 0 5px;
}
nav > .nav_ul > .nav_search > .nav_searchfield {
padding: 7px;
}
nav > .nav_ul > .nav_search > .fa_search {} .fa-margin {
margin-left: -20px;
}<!DOCTYPE>
<html>
<head>
<link href="backbone/general.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<ul class="nav_ul">
<li class="nav_li"><a href="#" class="nav_a">Link 1</a>
</li>
<li class="nav_li"><a href="#" class="nav_a">Link 2</a>
</li>
<div class="nav_search">
<input class="nav_searchfield" type="text" placeholder="Search ..."><span class="fa fa-search fa-margin"></span>
</div>
<li class="nav_li"><a href="#" class="nav_a">Link 3</a>
</li>
</ul>
</nav>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
