Cannot center div above another Bootstrap - html

I am trying to center:
<div style="text-align:center; margin-top:16px;" class="hidden-xs">
<div>Free Estimates</div>
<div>Licensed & Insured #C98354</div>
</div>
I want it to be centered above the div below it at all times.
<div class="collapse navbar-collapse" id="navbar-collapse-02">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Services
</li>
<li>
About Us
</li>
<li>
Ideas
</li>
<li>
Contact
</li>
</ul>
</div>
Unfortunately I can't quite figure out how to make it center above the div properly.
Desired output would kinda look like:
Full Header Code for Ref:
<header class="item header margin-top-0 padding-bottom-70" id="header1">
<div class="wrapper">
<div class="container">
<nav class="navbar navbar-default navbar-lg navbar-fixed-top" role="navigation">
<div class="container">
<div class="col-lg-1">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#navbar-collapse-02" data-toggle="collapse" type="button">
<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 brand" href="#">
<img src="images/new-logo-small.png">
</a>
<div class="hidden-xs"> A+ Rating BBB</div>
</div>
</div>
<div class="col-lg-6">
<div style="padding-top:67px; padding-left:125px; text-align:center; font-size:16px" class="hidden-md hidden-sm hidden-xs">
<div>
<div>Some Address</div>
<span class="fa fa-envelope"></span><span> <a style="text-decoration:none; color:#333">email#email.com</a> | </span>
<span class="fa fa-phone"></span><span> (727) 876-5309</span>
</div>
</div>
</div>
<div class="col-lg-5">
<!-- I want this to stay centered above the div below it -->
<div style="text-align:center; margin-top:16px;" class="hidden-xs">
<div>Free Estimates</div>
<div>Licensed & Insured #C98354</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-02">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Services
</li>
<li>
About Us
</li>
<li>
Ideas
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</header>

<div class="container" style="width: 1000px">
<div style="text-align:center; margin-top:16px; display: block; margin: 0 auto;" class="hidden-xs">
<div>Free Estimates</div>
<div>Licensed & Insured #C98354</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-02">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Services
</li>
<li>
About Us
</li>
<li>
Ideas
</li>
<li>
Contact
</li>
</ul>
</div>
</div>

I use percentage in a margin to center navbar and navbarnav. I hope that this help you.
<div class="makenavbarcenter">
<div class="hidden-xs headertitle">
<div>Free Estimates</div>
<div>Licensed & Insured #C98354</div>
</div>
<nav class="navbar navbar-default navbarmain">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1" 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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav makenavbarnavcenter">
<li class="headerlinks">Home
</li>
<li class="headerlinks">Services
</li>
<li class="headerlinks">About Us
</li>
<li class="headerlinks">Ideas
</li>
<li class="headerlinks">Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<style type="text/css">
.makenavbarcenter {
margin-left: 20%;
margin-right: 20%;
}
.navbarmain {
background-color: transparent;
border-color: transparent;
}
.makenavbarnavcenter {
margin-right: 20%;
margin-left: 20%
}
.headertitle {
text-align: center;
margin-top: 16px;
}
.headerlinks {
padding: 0px;
margin: 0px;
}
</style>

Related

Embed Bootstrap 3 navbar in header

In bootstrap I want to create a page header which consists of a static header, a navbar in a second row and a profile picture to the right, like this:
The profile picture should be of fixed size, the title and nav bars should have the same size each and should fill the screen width.
Problem is, I got no clue how to achieve this in css, especially sind it needs to embed a bootstrap navbar. My only idea would be an old-fashioned 2x2 table where the picture spans two rows, but tables are not meant for layout problems, so sure there must be some better way in css?
To show full effect Watch full-screen view.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="">
<div class="row">
<div class="col-md-11">
<nav class="navbar navbar-default navbar-fixed-top" style="border-radius: 5px 5px 0px 0px; border-bottom: none; border-right: 1px solid #e7e7e7; width: 91.5%">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
</div>
<!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default" style="margin-top: 50px; border-radius: 0px 0px 5px 5px; border-top: none">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li >
<a href="#">Link
<span class="sr-only">(current)</span>
</a>
</li>
<li>
Link
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</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>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
Link
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li role="separator" class="divider"></li>
<li>
Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div> <div class="col-md-1">
<div style="background-color: #f0f0f0; margin-left: -30px; padding-left: 10px; position: fixed">
<img src="https://cdn4.iconfinder.com/data/icons/dragon/512/User.png" alt="" class="" style="width:100px; margin-left: 10px ">
</div>
</div>
</div>
<!--/.row-->
<div style="height: 100vh;"></div>
</div>
<!--/.container-fluid-->
Use bootstrat 3's media styling
In this snippet I used only 1 embedded BS Nav and added a border color to delineate the media objects
ALSO - Bootstrap navs are responsive so when you run the snippet switch to expanded view
.media {
border: 1px solid gray;
}
.media, .media-body {
overflow: visible !important;
}
<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.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</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>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>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://via.placeholder.com/80x80" alt="Portrait">
</a>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<nav>Nav</nav>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://via.placeholder.com/80x80" alt="Portrait">
</a>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<nav>Nav</nav>
</div>
<div class="media-right">
<a href="#">
<img class="media-object" src="http://via.placeholder.com/80x80" alt="Portrait">
</a>
</div>
</div>
</div>
</div>

How can i modify this bootstrap code?

I found a code from
http://usebootstrap.com/theme/facebook
But in this code, I want to make 'Home icon' never be collapsed at any browser size.
CODE:
<div class="navbar navbar-blue navbar-static-top">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
b
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
###▽▽▽ I want this icon remain on the navbar, not in collapsed dropdown menu
<i class="glyphicon glyphicon-home"></i>
###△△△ I want this icon remain on the navbar, not in collapsed dropdown menu
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="glyphicon glyphicon-user"></i>
<ul class="dropdown-menu">
<li>More</li>
<li>More</li>
<li>More</li>
</ul>
</li>
</ul>
</nav>
</div>
Bootply: https://www.bootply.com/lEfd188zDg
I tried to move <i class="glyphicon glyphicon-home"></i> to after b, but it looks very ugly.
I want that 'Home icon' is still seen in smaller browser size, being looks nicely not ugly. How can i modify well?
EDIT
Pic:
This simplified code is a little different from above code that i posted firstly.
Simplified code:
<div class="wrapper">
<div class="box">
<div class="row row-offcanvas row-offcanvas-left">
<div class="column col-sm-12 col-xs-12" id="main">
<!-- top nav -->
<div class="navbar navbar-blue navbar-static-top">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="glyphicon glyphicon-user"></i>
<ul class="dropdown-menu">
<li>More</li>
<li>More</li>
</ul>
</li>
</ul>
</nav>
<!-- /top nav -->
</div>
</div>
</div>
</div>
</div>
original result is like:
and in narrow browser,
But purpose result is like:
Would give me the way how to make this?
I just updated your HTML code and added CSS. Just replace it with yours. Please Only tap nav.
<style>
.heading-icons li{
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
}
</style>
<div class="navbar navbar-blue navbar-static-top">
<div class="col-xs-6 col-sm-6">
<ul class="list-inline heading-icons">
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
<li>
<i class="glyphicon glyphicon-home"></i>
</li>
</ul>
</div>
<div class="navbar-header col-xs-6 col-sm-6">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
class="glyphicon glyphicon-user"></i></a>
<ul class="dropdown-menu">
<li>More</li>
<li>More</li>
</ul>
</li>
</ul>
</nav>
<!-- /top nav -->
</div>

How to add two <li> in right of navbar

I have navbar with some <li> at it.
Here is my HTML and CSS code:
<nav class="navbar navbar-default navbar-fixed-top navbar-centered" role="navigation">
<div class="container" style="position: relative">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">
<img src="~/Images/logo.png" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#about">About Us</a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#services">Benefits</a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
I need to add there two <li>, but it need to be at right of navbar.
Something like this:
How I can do this?
<nav class="navbar navbar-default navbar-fixed-top navbar-centered" role="navigation">
<div class="container" style="position: relative">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">
<img src="~/Images/logo.png" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" style="float:left">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#about">About Us</a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#services">Benefits</a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
<ul style="float:right">
<li><a>Try it Risk free</a></li>
<li><a>login</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
You can add another <ul> element with navbar-right class to it
<nav class="navbar navbar-default navbar-fixed-top navbar-centered" role="navigation">
<div class="container" style="position: relative">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">
<img src="~/Images/logo.png" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#about">About Us</a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#services">Benefits</a>
</li>
<li style="margin-left: 35px; margin-top: 10px;">
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
//this is the nav elments towards right
<ul class="nav navbar-nav navbar-right">
<li>Right Link1</li>
<li>Right Link 2</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
You can use display flex on the Nav
CSS
ul.nav{
display:flex;
align-items: flex-start;
}
ul.nav li.right{
align-self: flex-end;
color: red;
border: 2px solid red;
}
HTML
ul.nav
li*3 // normal links
li.right*2 // sign up links

navbar-toggle bootstrap content hidden by another div

I'm using the bootstrap navbar-toggle button and when I click on it, the content stays hidden by the next div, I'm trying to fix it but I can't see the error.
You will see I have two div.row. The second div.row is hidding the div id="navbar1" content, that is the target of the navbar-toggle button.
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default" style="height:75px;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="zzlogo.png">
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Nosotros <span class="caret"></span>
<ul class="dropdown-menu">
<li>Desarrolladores</li>
<li>Trayectoria</li>
</ul>
</li>
<li class="dropdown">
Productos <span class="caret"></span>
<ul class="dropdown-menu">
<li>Abarrotes</li>
<li>Frutas y Verduras</li>
<li>Carnes</li>
<li>Lácteos</li>
</ul>
</li>
<li>Contacto</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- THIS DIV IS NOT MOVING WHEN I CLICK ON THE NAVBAR-TOGGLE BUTTON -->
<div class="row">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header col-xs-5 col-sm-4 col-md-3 col-lg-3">
Administración
</div>
<div class="col-xs-7 col-sm-8 col-md-9 col-lg-9">
<ul class="nav navbar-nav">
<li >Usuarios</li>
<li >Productos</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
Sorry for my bad english and thanks.
The problem is caused by declaring a height for the navbar (height: 75px). It's default is min-height: 50px so once the viewport is under 768px the navbar can't expand rendering the background as "invisible" if you will.
You can use padding to increase the height.
See working examples.
Example 1
.navbar.navbar-top {
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 0;
border-radius: 0;
}
.navbar.navbar-bottom {
border-radius: 0;
}
.navbar-top .navbar-brand {
padding-top: 0;
margin-top: -12px;
}
#media (max-width: 767px) {
.navbar-top .navbar-collapse {
margin-top: 20px;
margin-bottom: -20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"> <span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img src="http://placehold.it/150x75/f00">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Nosotros <span class="caret"></span>
<ul class="dropdown-menu">
<li>Desarrolladores
</li>
<li>Trayectoria
</li>
</ul>
</li>
<li class="dropdown"> Productos <span class="caret"></span>
<ul class="dropdown-menu">
<li>Abarrotes
</li>
<li>Frutas y Verduras
</li>
<li>Carnes
</li>
<li>Lácteos
</li>
</ul>
</li>
<li>Contacto
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2"> <span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> Administración
</div>
<div class="collapse navbar-collapse" id="navbar2">
<ul class="nav navbar-nav">
<li>Usuarios
</li>
<li>Productos
</li>
</ul>
</div>
</div>
</nav>
Example 2
.navbar.navbar-top {
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 0;
border-radius: 0;
}
.navbar.navbar-bottom {
border-radius: 0;
}
.navbar.navbar-bottom a {
margin: 0 5px;
}
.navbar-top .navbar-brand {
padding-top: 0;
margin-top: -12px;
}
#media (max-width: 767px) {
.navbar-top .navbar-collapse {
margin-top: 20px;
margin-bottom: -20px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1"> <span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img src="http://placehold.it/150x75/f00">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Nosotros <span class="caret"></span>
<ul class="dropdown-menu">
<li>Desarrolladores
</li>
<li>Trayectoria
</li>
</ul>
</li>
<li class="dropdown"> Productos <span class="caret"></span>
<ul class="dropdown-menu">
<li>Abarrotes
</li>
<li>Frutas y Verduras
</li>
<li>Carnes
</li>
<li>Lácteos
</li>
</ul>
</li>
<li>Contacto
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-bottom">
<div class="container">
<div class="navbar-header"> Administración
<p class="navbar-text"> Usuarios Productos
</p>
</div>
</div>
</nav>

I am unable to customize the size of my picture in css.

I am trying to make the picture 100% but it wont work.
Code:
html:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<div class="headerimg"
><img src="pix/stockvault-city-skyline-at-sunset-113039.jpg">
</div>
<section id="intro" class="intro-section">
<div class="container">
Tell Me More
</div>
</section>
css:
.headerimg {
width: 50%;
height: 100px; }
It would be very helpful if anyone can help. I am usually able to do it but for some reason I am unable to do it this time. Thanks again for your help.
Just change CSS to:
.headerimg
{
width: 50%;
height: 100px;
}
img {
width: 100%;
}
It will make Image 100% in width.
look this : http://jsfiddle.net/cadh3vv9/
try the follow code
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<div class="headerimg"
><img style="width=50%" src="pix/stockvault-city-skyline-at-sunset-113039.jpg">
</div>
<section id="intro" class="intro-section">
<div class="container">
Tell Me More
</div>
</section>
I styled the image to 50% width you also want it to be 100 px height well thats wrong, its something like telling the browser show a pic of a roadkilled dog, you must define what you preffer, width or height because image resize uses one of these values to resize correct