my title inside my navbar for some reason is not moving to the center as I want to. I tried using padding, text-align and use right function all doesn't work. Can anyone help me? I tried following this question here but nothing happens, bootstrap 3 - how do I place the brand in the center of the navbar?
Here is the code whole code so sorry for the mess:
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<html>
<head>
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Summary</li>
<li class="dropdown">
Edit User Information <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Personal Information Edit</li>
</ul>
</li>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>#yield('title')</h3>
</li>
</ul>
</div>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
css style I used it like this:
style.css
body{
margin:0px;
padding:0px;
font-family:"Helvetica Neue", Helvetica, Arial;
}
#sidebar{
background:blue;
width:200px;
height:100%;
display:block;
position: fixed;
left:-200px;
top:0px;
transition:left 0.3s linear;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
ul{
margin:0px;
padding:0px;
list-style-type:none;
display:flex;
justify-content: center;
}
ul li{
list-style:none;
}
ul li a{
background:#0000FF;
color: white;
border-bottom:1px solid #111;
display:block;
width:180px;
padding:10px;
text-decoration: none;
}
#sidebar-btn{
display:inline-block;
vertical-align: middle;
width:20px;
height:15px;
cursor:pointer;
margin:20px;
position:absolute;
top:0px;
right:-60px;
}
#sidebar-btn span{
height:1px;
background: white;
margin-bottom:5px;
display:block;
}
#sidebar-btn span:nth-child(2){
width:75%;
}
#sidebar-btn span:nth-child(3){
width:50%;
}
#navbar-toggle collapsed{
background:#0000FF;
}
.navbar {background:#0000FF;}
nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
color: white;
background-color: transparent;
}
#center-text ul{
list-style-type:none;
display:flex;
justify-content: center;
}
This should work
ul{
list-style-type:none;
display:flex;
justify-content: center;
}
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li><h3>Text</h3></li>
</ul>
This shouldn't interfere with other classes
#center-text ul{
list-style-type:none;
display:flex;
justify-content: center;
}
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>Text</h3>
</li>
</ul>
</div>
Related
I have a section in my header named #contact-stripe that has a space/gap between it and the navbar. However, I don't see anywhere that has padding or margin so I'm stumped.
I put this on CodePen which may make it easier to see.
I've used Chrome's inspect to try and find anything that is using margin/padding and just can't find it.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Raleway:400,400i,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Listing Naples</title>
</head>
<body>
<header>
<!-- Contact Stripe -->
<section id="contact-stripe">
<div class="container">
<span class="float-left"><i class="fas fa-envelope"></i> Email Us</span>
<span class="float-right">
<div class="telephone align-middle">
<i class="fas fa-phone d-sm-inline-block align-middle"></i>
<span class="telephone-number d-sm-inline-block align-middle">(239) 248-8171</span>
</div>
</span>
<ul class="social">
<li class="align-middle"><i class="fab fa-facebook-square"></i></li>
<li class="align-middle"><i class="fab fa-twitter-square"></i></li>
<li class="align-middle"><i class="fab fa-instagram"></i></li>
<li class="align-middle"><i class="fab fa-linkedin"></i></li>
</ul>
</div>
</section>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-custom">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://s3.amazonaws.com/listing-naples/assets/listing-naples-logo.png" alt="Listing Naples Team Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Buying</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Selling</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About our Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 ml-4 my-lg-0">
<input class="form-control-sm mr-sm-2 custom-input-sm" type="search" placeholder="MLS Number" aria-label="Search">
</form>
</div><!-- end collapse navbar-collapse div-->
</div><!-- end container div -->
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
CSS
body {
font-family: 'Source Sans Pro', sans-serif;
padding:0;
}
#contact-stripe {
background-color: #000;
border-bottom: 1px solid #353a3b;
color: rgba(255, 255, 255, 0.5);
}
ul.social{
text-align:center;
list-style-type:none;
}
ul.social li {
display:inline-block;
border-right:1px solid #353a3b;
}
ul.social li:first-of-type {
border-left: 1px solid #353a3b;
}
.telephone {
background-color:red;
}
.telephone-number {
background: teal;
}
.navbar-custom {
background-color:#000;
}
header li {
padding: .5rem;
margin:0;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
font-weight:400;
font-size: 1rem;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link, .navbar-custom li:hover {
color: white;
background-color: orange;
}
.active {
background-color: orange;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lora', sans-serif;
}
h1 {
font-size: 1.8rem;
font-weight: bold;
}
Because your ul.social has a margin-bottom of 1rem.
just add this css to fix:
ul.social {
margin-bottom: 0;
}
I am using bootstrap 3 navbar functionality. The navbar is working fine when not collapsed but when the nabar collapses, the button is not at all working and not showing the menu option. I really dont understand what is causing this problem. I tried figuring it out but couldnt find any solution. Any help would be greatly appreciated. When I use computer path to refer the bootstrap files then toggle button is not working but when i use web address its working. Can anybody please help me on this
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Jobs 4 U
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script type="text/javscript" src="jquery-1.11.3.min.js"></script>
<script type="text/javscript" src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
.mt-top{
margin-top:75px;
}
.mt-top1{
margin-top:325px;
}
.vertical-center-row{
display:table-cell;
vertical-align: middle;
}
.colht1{
height:100px;
border: 5px solid yellow;
}
.navbar-custom {
background-color:#ffffff;
color:#ffffff;
border-radius:0;
padding:10px;
}
.ht{
height:300px;
}
h2,h3{
text-align: center;
}
sup{
color:red;
}
.bck{
background-image: url('images/job_index.jpg');
background-repeat:no-repeat;
background-size: cover;
height:600px;
}
.abtpad{
padding:5px;
margin-bottom:10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">Jobs 4u</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">How it Works</li>
<li class="">
<a class="" href="JobSeeker.php">Jobseeker</a>
</li>
<li class="">
<a class="" href="Employer.php">Employer</a>
</li>
<li class="">
<a class="" href="contactus.php">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
I have started developing a website using bootstrap and it is responsive but only to some extend.
If i minimize the browser, the contents auto-arrange itself but as i keep on minimizing at some point the h1 & p contents stop being responsive.`
<html lang="en">
<head>
<title>NiKuLsAn DeSiGn</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
background-color: black;
}
.imageAndText {position: relative;}
.imageAndText .col {position: absolute; z-index: 1; top: 50px; right: 70px;}
.imageAndText .col2 {position: absolute; z-index: 1; top: 200px; left: 150px;}
.imageAndText .col3 {position: absolute; z-index: 1; top: 50px; left: 150px;}
p{
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="imageAndText">
<img src="banner1.jpg" class="img-responsive" style="width:100%; height:auto;">
<div class="col">
<ul class="nav navbar-nav">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div class="col3">
<img src="logo.jpg" alt="logo" />
</div>
<div class="col2">
<h1>Amazing Dude.</h1>
<h1>Amazing Life.</h1>
<p>Welcome to the personal site of <b>John Doe</b><br>A professional skier and a musician.</p>
</div>
</div>
</div>
</div>
</body>
Please help as I am not able to understand what is going wrong.
I have created an example where I have used minimal custom CSS and everything else is wprking using bootstrap framework.. Have a look and ask your queries.
body {
background: url('http://placehold.it/1920x400') no-repeat center center;
background-size: cover;
/* Workaround for some mobile browsers */
min-height: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #000;
}
.featurette-divider {
margin: 20px 0;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar-wrapper CustomNavbar">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo Goes here</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<hr class="featurette-divider">
<div class="container ">
<div class="col-sm-12">
<h1>Amazing Dude.</h1>
<h1>Amazing Life.</h1>
<p>Welcome to the personal site of <b>John Doe</b>
<br>A professional skier and a musician.</p>
</div>
</div>
I have strange problem from the mobile menu. When I want to create a version for small, medium, large device 4 columns dropdown menu.
In the menu on the Extra Small Devices <768px:
When I click Link1>TEST
He is brings me to the url located under LINK2. Why?
If a click Link3>TEST
(Aslo 4 columns menu for larger device)
Everything is OK.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Test menu</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body{
background: #000000;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 3px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #ffffff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
#media(min-width:768px) {
#double li { width:25%;
float:left;
display:inline;
margin-bottom: 14px;
}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;
min-width: 500px;
}
}
#media(max-width:767px) {
#double li { width:100%;
float:left;
display:inline;
}
.navbar, .dropdown-menu{
background:rgba(255,255,255,0.25);
border: none;
min-width: auto;
}
}
</style>
</head>
<body>
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class=" dropdown">
Link1 <span class="caret"></span>
<ul class="dropdown-menu" id="double">
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
</ul>
</li>
<li>Link2</li>
<li class=" dropdown">
Link3 <span class="caret"></span>
<ul class="dropdown-menu" id="double">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Ok I solved this problem.
The answer if someone had the same problem
#media(min-width:768px) {
#double {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
#media(max-width:767px) {
#double {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
You've given both dropdowns the same ID. Not sure why that caused the behavior you're getting but fixing those fixes the menus:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class=" dropdown">
Link1 <span class="caret"></span>
<ul class="dropdown-menu" id="double1">
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
<li>
TEST
</li>
</ul>
</li>
<li>Link2</li>
<li class=" dropdown">
Link3 <span class="caret"></span>
<ul class="dropdown-menu" id="double2">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
</ul>
</li>
</ul>
</div>
Normally, I'd do a runnable snippet but your styles were being overwritten by the Bootstrap styles here.
Please tell me why the dropdown menu isn't functioning and the fa fa-search icon isn't showing within the search box.
The dropdown menu is not collapsing. And the Search icon from http://fortawesome.github.io/Font-Awesome/icon/search/ doesn't display within the search box as it should.
Your help is highly appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="X">
<link rel="icon" href="">
<title></title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Custom Styles -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- NAVBAR ============================================== -->
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigations</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div> <!-- Ende of Navbar Header -->
<div class="navbar-collapse collapse">
<div class="right-inner-addon pull-right">
<i class="fa fa-search"></i>
<input type="search" class="form-control" placeholder="search">
</div> <!-- End of Search -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact Us</li>
<li class="dropdown">
Community <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Social</li>
<li>Twitter</li>
<li>Facebook</li>
<li>LinkedIn</li>
<li>Blog</li>
</ul>
</li>
</ul>
</div> <!-- End of Navbar Collapse -->
</div> <!-- Ende of Navbar Container -->
</div> <!-- End of Navbar -->
</div> <!-- End of Container -->
</div> <!-- End of .navbar-wrapper -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
CSS
/* --- Navbar ----------------- */
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
.right-inner-addon {
position: relative;
top: 8px;
right: 1px;
height: 3px;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon i {
position: absolute;
right: 0px;
padding: 10px;
pointer-event: none;
}
/* --- Responsive CSS ----------------- */
#media (min-width: 768px) {
.navbar-wrapper {
margin-top: 20px;
}
.navbar-wrapper .container{
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
border-radius: 4px;
}
}
For the search issue, you need to put input-group-addon inside like so
<i class="input-group-addon fa fa-search"></i>
or preferably taken from the bootstrap website
<div class="input-group right-inner-addon pull-right">
<div class="input-group-addon">
<i class="input-group-addon fa fa-search">
</div>
<input type="search" class="form-control" placeholder="search">
</div> <!-- End of Search -->
For the dropdown, I am not sure, but my guess would be do you need dropdown class in li
instead of
can you try