I'm training my bad css skills and I can't figure out how create a left navbar (see the image below).
Note: I already have a top navbar... And in the middle of both will exist the content of page.
<aside>
<div class="navbar navbar-fixed-left">
<ul class="nav navbar-nav">
<li style="border-right: 0px solid #bdc3c7; border-top: 0.5px solid #bdc3c7;">
<a href="#">
<i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE
</a>
</li>
<li style="border-top: 1px solid #bdc3c7;">
<a href="#">
<i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE
</a>
</li>
<li style="border-top: 1px solid #bdc3c7; border-bottom: 1px solid #bdc3c7;">
<a href="#">
<i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE
</a>
</li>
</ul>
</div>
</aside>
And my css:
.navbar-fixed-left {
width: 180px;
position: fixed;
border-radius: 0;
height: 100%;
background-color: #F0F0F0;
border-right: 1px solid #bdc3c7;
}
.navbar-fixed-left .navbar-nav > li {
float: none;
width: 178px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
margin-top: -50px;
margin-left: 140px;
}
aside {
margin-top: 55px;
}
You can try CSS Flexbox. Make your ul li a element a flex container & wrap your text inside a wrapper (in my case .text). And apply the following properties:
ul li a {
display: flex;
text-decoration: none;
}
Have a look at the snippet below:
body {
margin: 0;
}
.navbar-fixed-left {
width: 180px;
position: fixed;
border-radius: 0;
height: 100%;
background-color: #F0F0F0;
border-right: 1px solid #bdc3c7;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
margin-top: -50px;
margin-left: 140px;
}
aside {
margin-top: 55px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul li a {
display: flex;
text-decoration: none;
}
ul li a:hover {
background: #E0E1E6;
}
ul li a i {
padding: 10px;
border-right: 1px solid #bdc3c7;
}
ul li a .text {
padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<aside>
<div class="navbar navbar-fixed-left">
<ul class="nav navbar-nav">
<li style="border-right: 0px solid #bdc3c7; border-top: 0.5px solid #bdc3c7;">
<a href="#">
<i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span>
</a>
</li>
<li style="border-top: 1px solid #bdc3c7;">
<a href="#">
<i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span>
</a>
</li>
<li style="border-top: 1px solid #bdc3c7; border-bottom: 1px solid #bdc3c7;">
<a href="#">
<i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span>
</a>
</li>
</ul>
</div>
</aside>
Hope this helps!
Try this following code,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
</head>
<body class="no-skin">
<div id="sidebar" class="sidebar responsive ace-save-state">
<ul class="nav nav-list">
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-list"></i>
<span class="menu-text"> Applications </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-list"></i>
<span class="menu-text"> Applications </span>
<b class="arrow fa fa-angle-down"></b>
</a>
<b class="arrow"></b>
</li>
</ul><!-- /.nav-list -->
</div>
</body>
</html>
To get the related CSS files, Click Here https://github.com/suthagar23/AdmissionSystem/tree/master/public
EDIT: I think the issue is snippet output's viewport is smaller and eats some styles, you will have to tweak values through #media querys if you wish to preserve responsiveness with the code you provided:
Full resizable JSFiddle here (a few CSS were changed vs the snippet below, to make it look ok on bigger viewport)
Big viewport:
Smaller viewport:
Isolate icons from text menu by wrapping text on <span>. Make lis relative and icons absolute and adjust values as desired:
.navbar-fixed-left {
width: 180px;
position: fixed;
border-radius: 0;
height: 100%;
background-color: #F0F0F0;
border-right: 1px solid #bdc3c7;
}
ul.nav.navbar-nav {
margin-top: 0;
}
.navbar-fixed-left .navbar-nav li {
float: none;
width: 194px;
border-top: 1px solid #bdc3c7;
position: relative;
border-right: 1px solid lightgray;
}
li:nth-child(3) {
border-bottom: 1px solid #bdc3c7;
}
.navbar-fixed-left .navbar-nav li a:hover {
background-color: gainsboro;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
margin-top: -50px;
margin-left: 140px;
}
span {
margin-left: 60px;
color: gray;
}
aside {
margin-top: 55px;
}
i.fa {
border-right: 1px solid #bdc3c7;
padding: 10px 15px;
position: absolute;
top: 0;
bottom: 0;
line-height: 20px;
}
.color1 {
border-left: 3px solid red;
margin-left: -1px;
}
.color2 {
border-left: 3px solid blue;
margin-left: -1px;
}
.color3 {
border-left: 3px solid green;
margin-left: -1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<aside>
<div class="navbar navbar-fixed-left">
<ul class="nav navbar-nav">
<li>
<a href="#">
<i class="fa fa-plus color1" aria-hidden="true" style="color: grey;"></i><span>CREATE</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-plus color2" aria-hidden="true" style="color: grey;"></i><span>CREATE</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-plus color3" aria-hidden="true" style="color: grey;"></i><span>CREATE</span>
</a>
</li>
</ul>
</div>
</aside>
Related
I'm trying to give hover effect to .login-2-submenu a background effect on all li tags but not effecting at all , tried all possible methods. i tried to give ul to class but not worked i also tried to classs in li not worked as well ,
Am I missing something?
here is my html code
<nav>
<ul class="flex">
<li class="px-2"> <input class="searchbox px-2" type="search" name="search"
placeholder="Search for products, brands and more" autocomplete="off"><i class="fa-solid fa-magnifying-glass"></i>
</li>
<li class="btn-li px-2"> <button>Login</button>
<div class="login-submenu">
<div class="login1-1-submenu">
<h4>New Customer?</h4>
<a class="black" href="#">Sign Up</a>
</div>
<div class="login-2-submenu">
<ul>
<l1 class="block px border"><a class="black" href=""><i class="fa-solid fa-user"></i>My
Profile</a></l1>
<l1 class="block px border"><a class="black" href=""><i
class="fa-solid fa-circle-plus"></i>Flipkart Plus Zone</a></l1>
<l1 class="block px border"><a class="black" href=""><i
class="fa-solid fa-bag-shopping"></i>Orders</a></l1>
<l1 class="block px border"><a class="black" href=""><i
class="fa-solid fa-heart"></i>Wishlist</a></l1>
<l1 class="block px border"><a class="black" href=""><i
class="fa-solid fa-circle-dollar-to-slot"></i>Rewards</a></l1>
<l1 class="block px border"><a class="black" href=""><i
class="fa-solid fa-gift"></i>Gift Cards</a></l1>
</ul>
</div>
</div>
</li>
<li class="px-4"> Become a Seller</li>
<li class="px-4 toggle"> More
<div class="sub-menu">
<ul>
<li><i class="fa-solid fa-bell"></i>Notification Preferances</li>
<li><i class="fa-solid fa-question"></i>24/7 Customer Care
</li>
<li><i class="fa-solid fa-arrow-trend-up"></i>Advertise</li>
<li><i class="fa-solid fa-download"></i>Download App</li>
</ul>
</div>
</li>
<li class="px-5"> <i class="fa-solid fa-cart-shopping"></i>Cart</li>
</ul>
</nav>
and css
.sub-menu {
display: block;
position: absolute;
right: 170px;
top: 50px;
background-color: white;
width: 250px;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
.sub-menu ul {
text-align: left;
margin: 0;
padding: 0;
}
.sub-menu ul li {
padding: 15.3px 10px;
border-bottom: 1px solid #d0d9d4;
}
.sub-menu .fa-solid {
padding: 0 10px;
color: #2874f0;
}
.sub-menu ul li:hover {
background-color: #ebf2f0;
}
.sub-menu ul li a {
color: black;
}
/* -----------------------------------------------------------------------login-submenu---------------------------------------------- */
.login-submenu {
background-color: white;
position: absolute;
top: 50px;
right: 465px;
box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
height: 345px;
width: 250px;
}
.login-submenu ul {
padding: 0;
margin: 0;
}
.login-submenu .fa-solid {
padding: 0 10px;
color: #2874f0;
}
.sign {
color: blue !important;
font-size: 15px;
font-weight: 600;
transform: translate(160px, 0);
}
.login-submenu ul li:hover {
background-color: #28cf8c !important;
}
.login1-1-submenu {
display: flex;
border-bottom: 1px solid #d0d9d4;
padding: 15px 10px;
}
.login1-1-submenu h4 {
color: rgba(20, 20, 20, 0.9);
}
.login1-1-submenu a {
padding-left: 50px;
color: blue;
font-weight: 600;
}
.login1-1-submenu:hover {
background-color: #ebf2f0;
}
.login-2-submenu ul li:hover {
background-color: #ebf2f0 !important;
}
I'm tried to give hover effect to login-2-submenu but not working but other hover effect are working.
<l1 class="block px border"> just look this code, you have typed l1 instead of li
all li tags are misspelled in under .login-2-submenu
I am trying to make the color of the side bar. when I try to make the browser window small the color at the bottom left is like a faded black and white and I am trying to make the scrollbar hidden but still can scroll and also looking a CSS code that can make the word steady when I close and open my side navigation menu.
Thank you for helping me in advance.
enter image description here
my css code
.contentnav{
height: 100%;
color: rgba(255,255,255,1);
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
padding-top: 50px;
transition: left 0.3s linear;
width: 50px;
display: block;
}
.contentnav::-webkit-scrollbar-thumb{
background: #115a01;
outline: 1px solid rgba(255,255,255,1);
}
.contentnav::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.contentnav::-webkit-scrollbar {
width: 0.4em;
}
.contentnav ul li ul{
display: none;
}
.contentnav ul i{
margin-left: 10px;
color: #FFFFFF;
text-shadow: 1px 1px 1px #000;
padding: 5px;
width: 25px;
padding-bottom: 8px;
cursor: pointer;
vertical-align:middle;
}
.contentnav ul{
list-style: none;
margin:0px;
padding:0px;
}
.contentnav ul span{
position: absolute;
margin-left: 21px;
cursor: pointer;
margin-top: 5px;
float: left;
}
.contentnav i:hover{
color: rgba(0,204,102,1);
}
my html code
<div class="contentnav" id="contentmenu">
<ul>
<li>
<i class="fas fa-home"></i>
<span id="same" class="nav-text">Home</span>
</li>
<li>
<i class="fas fa-book"></i>
<span id="same" class="nav-text">L</span>
<ul>
<li>-Bo</li>
<li>-B</li>
<li>-R</li>
<li>-E</li>
<li>-P</li>
</ul>
</li>
<li>
<i class="fas fa-hourglass-half"></i>
<span id="same" class="nav-text">Online</span>
</li>
<li>
<i class="fas fa-bookmark"></i>
<span id="same" class="nav-text">E</span>
<ul>
<li>-S</li>
<li>-Fee</li>
</ul>
</li>
<li>
<i class="fas fa-file-alt"></i>
<span id="same" class="nav-text">C</span>
</li>
<li>
<i class="fas fa-clipboard"></i>
<span id="same" class="nav-text">G</span>
</li>
<li>
<i class="fas fa-info-circle"></i>
<span id="same" class="nav-text">Announcement</span>
</li>
<li>
<i class="far fa-calendar-alt"></i>
<span id="same" class="nav-text">Calendar</span>
</li>
<li>
<i class="fab fa-hire-a-helper"></i>
<span id="same" class="nav-text">Guides</span>
</li>
<li>
<i class="fas fa-sign-out-alt"></i>
<span id="same" class="nav-text">Logout</span>
</li>
</ul>
</div>
I think this should do the trick.
Remove this and
.contentnav::-webkit-scrollbar-thumb{
background: #115a01;
outline: 1px solid rgba(255,255,255,1);
}
.contentnav::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.contentnav::-webkit-scrollbar {
width: 0.4em;
}
Replace it with this.
.contentnav::-webkit-scrollbar-button
{
display: block;
height: 13px;
border-radius: 0px;
background-color: #AAA;
}
.contentnav::-webkit-scrollbar-button:hover
{
background-color: #AAA;
}
.contentnav::-webkit-scrollbar-thumb
{
background-color: #CCC;
}
.contentnav::-webkit-scrollbar-thumb:hover
{
background-color: #CCC;
}
.contentnav::-webkit-scrollbar-track
{
background-color: #efefef;
}
.contentnav::-webkit-scrollbar-track:hover
{
background-color: #CCC;
}
.contentnav::-webkit-scrollbar
{
width: 15px;
}
.new-application-menu {
background-color: #47484c;
height: 100%;
padding: 0px;
z-index: 10;
box-shadow: -1px 0px 2px #000000;
}
.new-application-menu ul {
color: #fff;
/* border: 1px solid white; */
}
.new-application-menu ul li {
padding: 8px;
border-bottom: 0.01px solid rgba(255, 255, 255, 0.2);
background-color: #27A9E3;
}
.new-application-menu ul li p {
font-size: 12px;
padding: 5px;
}
.new-application-menu ul li i {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
}
<div class="col-md-1 new-application-menu">
<ul class="nav navbar-nav text-center">
<li><img src="assets/Img/logo2.png" width="55" height="95"></li>
<li> <i class="material-icons" style="font-size:36px">description</i>
<p>بانک جامع اطلاعاتی</p>
</li>
<li> <i class="material-icons" style="font-size:36px">assessment</i>
<p>نبض شهر</p>
</li>
<li> <i class="material-icons" style="font-size:36px">colorize</i>
<p>آزمایشگاه شهری</p>
</li>
<li> <i class="material-icons" style="font-size:36px">remove_red_eye</i>
<p>رصد طرح های توسعه ی شهری</p>
</li>
<li> <i class="material-icons" style="font-size:36px">location_city</i>
<p>رصد پروژه های شهری</p>
</li>
</ul>
</div>
When I'm using this code and my list feature's height exceeds my page size, it automatically adds a scrollbar to my page and it causes to my grid system to overlay each other. How can I prevent this overlay?
You can use your custom class like .myLogo as i added
.new-application-menu {
background-color: #47484c;
height: 100%;
padding: 0px;
z-index: 10;
box-shadow: -1px 0px 2px #000000;
}
.new-application-menu ul
{
color: #fff;
/* border: 1px solid white; */
}
.new-application-menu ul li
{
padding: 8px;
border-bottom: 0.01px solid rgba(255,255,255,0.2);
background-color: #27A9E3;
}
.new-application-menu ul li p
{
font-size: 12px;
padding: 5px;
}
.new-application-menu ul li i
{
font-size: 12px;
color: rgba(255,255,255,0.8);
}
.myLogo{ width:100px; height:100px;}
<div class="col-md-1 new-application-menu">
<ul class="nav navbar-nav text-center">
<li><img src="assets/Img/logo2.png" width="55" height="95" class="myLogo"></li>
<li> <i class="material-icons" style="font-size:36px">description</i><p>بانک جامع اطلاعاتی</p></li>
<li> <i class="material-icons" style="font-size:36px">assessment</i> <p>نبض شهر</p></li>
<li> <i class="material-icons" style="font-size:36px">colorize</i><p>آزمایشگاه شهری</p> </li>
<li> <i class="material-icons" style="font-size:36px">remove_red_eye</i><p>رصد طرح های توسعه ی شهری</p> </li>
<li> <i class="material-icons" style="font-size:36px">location_city</i><p>رصد پروژه های شهری</p> </li>
</ul>
</div>
This question already has an answer here:
How can I draw a left pointing triangle using CSS?
(1 answer)
Closed 6 years ago.
I'm actually trying to implement a design done for me into HTML5 and CSS3 with Twitter Bootstrap.
I've got a sidebar on the left of the screen with a list inside, nothing complex.
<html>
<section class="sidebar">
<ul class="sidebar-menu">
<li class="active">
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
</ul>
</section>
</html>
I would like to arrive to this result :
Any idea on the CSS code to manage to have that triangle on the right side centered in the middle bottom right ?
You can achieve that triangle with a pseudo element ::after, some positioning and transforming:
li {
position: relative;
display: block;
background: #04a4a9;
padding: 1em;
overflow: hidden;
}
li a {
color: white;
text-decoration: none;
}
li::after {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: white;
right: -8px;
top: 50%;
transform: translate(0, -50%) rotate(45deg);
}
<section class="sidebar">
<ul class="sidebar-menu">
<li class="active">
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
</ul>
</section>
You can achieve this using CSS pseudo elements:
To avoid wasting time with the triangle itself, just use a generator.
.btn {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
background: #53BED1;
color: #fff;
width: 400px;
height: 150px;
position: relative;
}
.btn::before {
right: 0;
top: 40%;
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 15px 20px 15px 0;
border-color: transparent #ffffff transparent transparent;
}
<div class="btn">My users</div>
You may indeed use a pseudo.
You can also draw background-color of li from that pseudo via a box-shadow, so the triangle is translucide.
You can use color on li to easily change bg-colors since you reset color on <a>, box-shadow color inherits color value(currentcolor) if none set in the rule (so does border-color)..
li {
position: relative;
display: inline-block;
padding: 1em;
overflow: hidden;
color:tomato;
text-shadow:1px 1px black;
}
li:nth-child(even) {
color:turquoise
}
li.active {
color: #04a4a9;
}
li a {
color: white;
text-decoration: none;
position: relative;
z-index: 1;
}
li::after {
content: '';
position: absolute;
width:0px;
height: 15px;
margin: -8px;
right: 0;
top: 50%;
transform: rotate(45deg);
box-shadow: 0 0 0 400px;
}
li.active::after {
width:15px;;
}
/*demo to check if you can see through */
body {
background:linear-gradient(45deg,gray,yellow,pink,blue,gray,yellow,pink,blue,gray,yellow,pink,blue,gray,yellow,pink,blue);
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<section class="sidebar">
<ul class="sidebar-menu">
<li>
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
<li class="active">
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
<li>
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
<li>
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
<li>
<a href="/home">
<i class="fa fa-users active-fa"></i>
<span class="menu-title">MY USERS</span>
</a>
</li>
</ul>
</section>
I need to align some elements in the center when the navbar is collapsed in responsive view, via the collapse button
At the moment I dont like the way my searchbox is padded, is there a way I could center it better?
My 'bell notification icon' and 'user dropdown' currently are position to the left, I want these to be positioned in the middle.
this is currently what it looks like:
I would like this to work in other browsers as well.
thank you, here is my code:
body {
padding-top: 102px;
background-color: #4d4d4d;
font-family: 'Lato', verdana, sans-serif;
}
.container {
width: 1530px;
margin-top: 0;
}
.navbar-fixed-top {
background-color: #fff;
}
.navbar-header {
min-height: 80px;
}
.hamburger-icon {
margin-top: 20px;
}
.navbar-default .navbar-brand {
line-height: 45px;
font-size: 45px;
color: #010101;
text-transform: uppercase;
}
.navbar-default .navbar-brand span {
font-style: normal;
color: #ff5500;
}
.dropdown-toggle.inbox {
margin-bottom: 5px;
}
.dropdown-menu.bell {
background-color: #f8f8f8;
border-radius: 0;
box-shadow: 0;
}
.dropdown-menu.bell h4 {
padding: 10px 0;
color: #010101;
text-align: center;
display: block;
}
.dropdown-menu.bell li a {
padding-top: 5px;
padding-bottom: 5px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
.dropdown-menu.bell li.divider {
padding: 0;
margin: 0 20px;
}
.dropdown-menu.bell .label {
background-color: transparent;
color: #ff5500;
font-weight: 100;
}
.badge-notify {
background: #ff5500;
margin-top: -24px;
margin-left: -20px;
height: 1.7em;
}
/* caret for notification dropdown */
.dropdown-menu.bell:before {
position: absolute;
top: -10px;
right: 10%;
display: inline-block;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu.bell:after {
position: absolute;
top: -9px;
right: 10%;
display: inline-block;
border-right: 9px solid transparent;
border-bottom: 9px solid #f8f8f8;
border-left: 9px solid transparent;
content: '';
}
.user span.fullname {
font-size: 14px;
color: #010101;
font-weight: 400;
}
.user span:last-child {
padding-right: 10px;
}
.user span:first-child {
padding-right: 30px;
padding-left: 10px;
}
.user .dropdown-menu.user-list {
width: 100%;
border-radius: 0;
border: 0;
background-color: #f8f8f8
}
.user .dropdown-menu.user-list li a {
margin: 5px 0px;
color: #010101;
}
.user .dropdown-menu.user-list li a:hover {
background-color: transparent;
color: #ff5500;
}
.user .dropdown-menu.user-list li.divider {
padding: 0;
margin: 0 20px;
}
/* Large desktop */
#media (max-width: 1590px) {
.container {
width: auto;
}
}
/* Portrait tablet to landscape and desktop */
#media (max-width: 979px) {}
/* Landscape phone to portrait tablet */
#media (max-width: 768px) {
.container {
width: auto;
}
.dropdown.bell .inbox {
width: 100% !important;
}
.dropdown-menu.bell h4 {
margin: 0 0;
}
.dropdown-menu.bell:before,
.dropdown-menu.bell:after {
display: none;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {} .search .input-group {
padding-top:15px;
font-family:'Lato',
sans-serif;
}
.search .input-group input.search-field {
padding: 0;
border-radius: 0;
border: 0;
box-shadow: none;
background-color: #fff;
font-size: 18px;
font-weight: 100;
}
.search .input-group input.search-field:hover {
background-color: transparent;
}
.search .input-group-btn button {
padding: 2px;
border: 0;
box-shadow: none;
background-color: transparent;
border-radius: 0;
}
.search .input-group-btn button:hover {
background-color: #f8f8f8;
color: #ff5500;
}
.search .input-group-btn .glyphicon-search {
font-size: 22px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
logo<span>here</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- search bar -->
<li class="dropdown search">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control search-field" placeholder="Search name or keyword" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
</button>
</div>
</div>
</form>
</li>
<!-- notification bell -->
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
<span class="badge badge-notify">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li>
<h4 class="menu-title">Notifications</h4>
</li>
<li><span class="label label-default">4:00 AM</span>Favourites Snippet
</li>
<li class="divider"></li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li class="divider"></li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<!-- user login information -->
<li class="dropdown user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" ></span>
<span class="fullname">Jacky Smith</span>
<span><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" ></span>
</a>
<ul class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>
I hope to help you, if you want to focus the search input of the same, although I would make a width and shrink a bit
EXAMPLE BOOTPLY
The problem now is that the font size is very large for a navbar
reduces the font size "font-size: 26px; for example" of the title LOGOHERE, or put an image tag img-responsive