I have the following CSS code, and my problem is that my
nav bar comes on top of my header block. How can I move
the nav bar straight down from the header?
header {
background: black;
height: 60px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
header img {
float: left;
margin-right: 10px;
position: relative;
}
header h1 {
color: white;
font: 26px Helvetica, Arial, sans-serif;
line-height: 60px;
margin: 0;
vertical-align: middle;
}
nav {
background: black;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
give the nav a margin-top that is the same height of your navbar.
nav {
background: black;
margin: 0;
margin-top:60px;
padding: 0;
position: absolute;
width: 100%;
}
#H.A; you give position absolute to your header block & nav block . So, when you give position absolute to an element then the element remove for the normal flow
CSS:
nav {
top:60px;
padding: 0;
position: absolute;
width: 100%;
}
Read this article for more http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
<!DOCTYPE html>
<html >
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.navbar-fixed-top{
position:static;
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>HOST</h1>
<h3>two is better than one</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 topnav" href="/">Host</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Login
</li>
<li>
Sign up
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>
Related
I am able to create a full-width image background in Bootstrap 3. An example can be shown here:
body,
html {
height: 100%;
}
body {
padding-top: 50px;
}
.full {
padding: 0 !important;
margin: 0 auto !important;
background-size: cover;
overflow: hidden;
}
.wide {
width: 100%;
height: auto;
}
.logo {
color: #fff;
font-weight: 800;
font-size: 14pt;
padding: 25px;
text-align: center;
}
.line {
padding-top: 20px;
white-space: no-wrap;
overflow: hidden;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Username
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="full" style="background-image:url('https://c.stocksy.com/a/RcN300/z0/805779.jpg');">
<div class="container">
<div class="row clearfix">
<div style="padding: 0 0 200px 0;">
<div class="col-xs-5 line">
<hr>
</div>
<div class="col-xs-2 logo text-center">Logo</div>
<div class="col-xs-5 line">
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="text-center">
<h1>Content</h1>
</div>
</div>
<!-- /.container -->
When the page displays for Desktop, the image is shown wide covering entire area.
When the page displays for mobile, all the image now shows as if a zoom-out occurred.
What's this behavior? How can I make the image in mobile view look similar to the image displayed in desktop version?
Is this related to responsive imaging?
Thanks
/Bilal
This is caused by the standard behavior of cover. If you resize your desktop browser to a portrait like size, you'll see what I mean.
One option would be to use a media query, so when page is viewed in portrait mode, it will look somewhat better.
body,
html {
height: 100%;
}
body {
padding-top: 50px;
}
.full {
padding: 0 !important;
margin: 0 auto !important;
background-size: cover;
overflow: hidden;
}
.wide {
width: 100%;
height: auto;
}
.logo {
color: #fff;
font-weight: 800;
font-size: 14pt;
padding: 25px;
text-align: center;
}
.line {
padding-top: 20px;
white-space: no-wrap;
overflow: hidden;
text-align: center;
}
#media (orientation: portrait) {
.full {
background-size: 200% auto;
background-position: top right;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Username
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="full" style="background-image:url('https://c.stocksy.com/a/RcN300/z0/805779.jpg');">
<div class="container">
<div class="row clearfix">
<div style="padding: 0 0 400px 0;">
<div class="col-xs-5 line">
<hr>
</div>
<div class="col-xs-2 logo text-center">Logo</div>
<div class="col-xs-5 line">
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="text-center">
<h1>Content</h1>
</div>
</div>
<!-- /.container -->
I have a problem in my css. I want to make my navbar like this ( as you can see, it has no background on navbar and it joins with slider ). I have tried every advice in youtube tutorials but nothing worked.
Here's the link I want to show you:
http://theme.ridianur.com/alamak/
I was able to change the color background of my navbar by opening bootstrap.min.css in notepad, search for "navbar-default", and change the color code. But, I wasn't able to make it no background like I want to.
My html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="boot/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Image Slider</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>NEWS</li>
<li>ABOUT</li>
<li>CONTACT US</li>
</ul>
<div class="logo">
<img src="kets.png">
</div>
</div>
</nav>
<div class="container-fluid hero-slide">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/1.jpg" alt="Cats1">
<div class="carousel-caption">
<div class="tekslide1">
<h1>Hewan yang mainstream</h1>
<p>Kita juga gatau kenapa milih topik kucing</p>
</div>
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="Cats2">
</div>
<div class="item">
<img src="img/3.jpg" alt="Cats3">
</div>
<div class="item">
<img src="img/4.jpg" alt="Cats4">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
and my css :
#charset "utf-8";
#font-face{
font-family: 'custom';
src: url('OpenSans-Regular.ttf') format('truetype'); //<-- semicolon
}
#font-face{
font-family: 'custom1';
src: url('Alternate.ttf') format('truetype'); //<-- semicolon
}
#media (min-width: 768px){
.navbar .navbar-nav{
display: inline-block;
float: none;
vertical-align: top;
font-family: 'custom';
letter-spacing: 5px;
padding-top: 12px;
margin-bottom: -20px;
}
.tekslide1{
font-size: 25px;
padding-left: 300px;
padding-bottom: 500px;
font-family: 'custom1';
}
.navbar .navbar-collapse{
text-align: right;
padding-right: 120px;
}
.navbar-default .navbar-collapse .nav >li >a {
color: #EEEEEE;
margin-left: 10px;
margin-right: 5px;
font-size: 13px;
}
.navbar-default .navbar-collapse .nav >li >a:hover, .navbar-default .navbar-collapse .nav >li >a:focus{
color: #BDBDBD;
background: none;
}
.logo{
float: left;
padding: 2px;
margin: 2px;
margin-bottom: -15px;
margin-left: 5%;
border: none;
border-radius: 100px;
}
.hero-slide{
margin-top: -20px;
}
.navbar li { color: #000 }
Any help would be appreciated. Thanks!
I'll explain this in pseudocode. If you want help you need include relevant bits of html and css in your post, not the archive of an entire site.
This effect you're looking for is nothing more than:
<div class="wrapper">
<div class="navigation">
</div>
<div class="banner">
</div>
</div>
and
.wrapper{background:url('your_image.jpg');}
.navigation, .banner{background:transparent;}
A graphic applied to a parent container and navigation / banner with transparent backgrounds.
I'm new on web design and I'm trying to use bootstrap toggle button, but it does not works when I put an image at down, I supose that the content is displaying at back of that Image.
This is the css and html, you can run code snipet to see what happens.
.mynavbar{
height: 83px !important;
font-family: 'Raleway',verdana !important;
background: rgb(238,238,238) !important;
margin-bottom: 0px;
}
.mynavbar>.container-fluid>.navbar-collapse>ul{
margin-top: 15px;
}
.mynavbar>.container-fluid>.navbar-header>div>.navbar-brand{
margin-top: 15px;
}
.blabla{
position: relative;
font-family: 'Old Standard TT',serif;
}
.inner {
text-align: center;
color:white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<nav class="navbar navbar-default mynavbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#togglebutton">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="vRef">
<a class="navbar-brand" href="#">Company Name</a>
</div>
</div>
<div class="collapse navbar-collapse" id="togglebutton">
<ul class="nav navbar-nav navbar-right">
<li>Us </li>
<li>Login </li>
<li class="dropdown">
Service <span class="caret"></span>
<ul class="dropdown-menu">
<li>Contact</li>
<li>Action</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="blabla">
<img src="http://static.panoramio.com/photos/original/182912.jpg" class="img-responsive" alt="website template image">
<div class="inner"><h1>My Company Name</h1><br/><h4>Some thing about m company</h4></div>
</div>
</div>
</div>
</body>
</html>
I know that something in css code is wrong, just when I'm centering the text with .blabla and .inner classes. But I need that and I dont know how to do that without killing toggle button function.
Any orientation?
Sorry for my bad english and thanks.
The reason you cant see your toggled menu is you are forcing the height of your navbar using height: 83px !important; the navigation toggle actually makes the height larger to show the hidden elements.
change the code for .mynavbar to use min-height: 83px; instead of the !important style
JSFIDDLE
You defined fixed height for .mynavbar. You need to remove that and make margin-bottom: 0 !important to remove a gap between menu and image. And to make a view as you need, you can add padding-bottom: 20px;.
Look at snippet
.mynavbar{
font-family: 'Raleway',verdana !important;
background: rgb(238,238,238) !important;
margin-bottom: 0px !important;
padding-bottom: 20px;
}
.mynavbar>.container-fluid>.navbar-collapse>ul{
margin-top: 15px;
}
.mynavbar>.container-fluid>.navbar-header>div>.navbar-brand{
margin-top: 15px;
}
.blabla{
position: relative;
font-family: 'Old Standard TT',serif;
}
.inner {
text-align: center;
color:white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<nav class="navbar navbar-default mynavbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#togglebutton">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="vRef">
<a class="navbar-brand" href="#">Company Name</a>
</div>
</div>
<div class="collapse navbar-collapse" id="togglebutton">
<ul class="nav navbar-nav navbar-right">
<li>Us </li>
<li>Login </li>
<li class="dropdown">
Service <span class="caret"></span>
<ul class="dropdown-menu">
<li>Contact</li>
<li>Action</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="blabla">
<img src="http://static.panoramio.com/photos/original/182912.jpg" class="img-responsive" alt="website template image">
<div class="inner"><h1>My Company Name</h1><br/><h4>Some thing about m company</h4></div>
</div>
</div>
</div>
</body>
</html>
Another way, if you don't want to change height of menu, is to add z-index: -1; to .blabla class, but then you need to add background to submenu
.mynavbar{
height: 83px !important;
font-family: 'Raleway',verdana !important;
background: rgb(238,238,238) !important;
margin-bottom: 0px;
}
.mynavbar>.container-fluid>.navbar-collapse>ul{
margin-top: 15px;
background: rgb(238,238,238) !important;
}
.mynavbar>.container-fluid>.navbar-header>div>.navbar-brand{
margin-top: 15px;
}
.blabla{
position: relative;
font-family: 'Old Standard TT',serif;
z-index: -1;
}
.inner {
text-align: center;
color:white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hi</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<nav class="navbar navbar-default mynavbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#togglebutton">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="vRef">
<a class="navbar-brand" href="#">Company Name</a>
</div>
</div>
<div class="collapse navbar-collapse" id="togglebutton">
<ul class="nav navbar-nav navbar-right">
<li>Us </li>
<li>Login </li>
<li class="dropdown">
Service <span class="caret"></span>
<ul class="dropdown-menu">
<li>Contact</li>
<li>Action</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="blabla">
<img src="http://static.panoramio.com/photos/original/182912.jpg" class="img-responsive" alt="website template image">
<div class="inner"><h1>My Company Name</h1><br/><h4>Some thing about m company</h4></div>
</div>
</div>
</div>
</body>
</html>
if you meant, that the menu is not visible, add z-index to .mynavbar and make this class as relative position. Check this fiddle
.mynavbar{
height: 83px !important;
font-family: 'Raleway',verdana !important;
background: rgb(238,238,238) !important;
margin-bottom: 0px;
position:relative;
z-index:1;
}
In your css change:
.inner {
Text-align: center;
Color:white;
Position: absolute;
Left: 50%;
Top: 50%;
Transform: translate(-50%, -50%);
}
To
.inner {
Text-align: center;
Color:white;
Position: absolute;
Left: 50%;
Top: 50%;
Margin-right: -50%
Transform: translate(-50%, -50%);
}
You need the margin-right to compensate for the margin left and also benefical as it makes your div responsive
Problem: space between .nav and .jumbotron in bootstrap.
what did I do: override the bootstrap.css , override .jumbotron{margin-bottom:0px}, it's not working.
What I've found: it works well when I debug it in the original file.
couldn't work in override css file
work well in original file
HTML:
<body>
<div class="header">
<div class="top-header">
<div class="jumbotron">
<img src="image/name.png" alt="">
<h2>Curiosity Creative</h2>
</div><!--Jumbotron-->
</div><!--top-header-->
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#displayItem" 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>
</div><!--navbar-header-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="displayItem">
<ul class="nav nav-tabs">
<li class="home active">
<i></i> Home</li>
<li class="me">
<i></i>AboutMe</li>
<li class="blog">
<i></i>Blog</li>
<li class="contact">
<i></i>Contact</li>
</ul>
</div> <!-- collapse navbar-collapse-->
</div><!--container -->
</nav><!--nav-->
</div>
CSS:
*{
margin: 0;
padding: 0;
}
body{
background: url("../image/body_bg.jpg");
overflow: scroll;
}
div{
position:relative;
}
.top-header{
background-color: white;
}
.jumbotron {
background-color:transparent !important;
text-align: center;
margin-bottom:0px;
}
.jumbotron img{
width: 400px;
}
.jumbotron h2{
color: #aaa;
font-size: 13px;
font-family: verdana;
}
It looks to me like maybe you've included your "index.css" before the "bootstrap.css". If that is correct, swap them around so that your "index.css" is loaded last, not first.
eg;
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
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