I am developing a website for a local business with the help of Bootstrap, and they would like their contact details on the right hand side of the page header (not the navbar). I am trying to use an unordered list and Bootstrap's column grid system to show their phone number and email address, and potentially other content such as a Facebook like button. I need some help to vertically center the content, because currently the phone number is at the bottom of the page header and the email address is being covered by the navbar.
My code looks like:
<!DOCTYPE html>
<html>
<head>
<title>Excellent Carpet Cleaning - Sample 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<!--header image-->
<div class="page-header">
<center><img src=http://goo.gl/Yk0lCv width=50%/></center>
<div class="col-sm-3 pull-right">
<ul>
<li><span class="glyphicon glyphicon-earphone"></span>555-5555</li>
<li><span class="glyphicon glyphicon-envelope"></span>someone#example.com</li>
</ul>
</div>
</div>
<!--top navbar-->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-center">
<li class="active">Home</li>
<li>Our Services</li>
<li>Current Offers</li>
<li>Facebook</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</body>
</html>
It is linked to bootstrap.min.css which can be downloaded here and my own external stylesheet which is:
.navbar-default {
background-color: #0000ff;
border-color: #0000a0;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #0000a0;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #0000a0;
}
.navbar-default .navbar-toggle {
border-color: #0000a0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #0000a0;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ffffff;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #0000a0;
}
}
/*end navbar*/
body {
padding-top: 0;
}
.page-header {
margin-top: 10px;
margin-bottom: 10px;
}
.page-footer {
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 5px;
background-color: #0000ff;
color: #ffffff;
border-color: #bb0000;
}
li {
list-style-type: none;
}
For Extra Small Devices:
<div class="page-header" style="text-align:center;">
<center>
<img src="http://goo.gl/Yk0lCv" width="50%"/>
</center>
<div class=" hidden-lg hidden-md hidden-sm"> <span class="glyphicon glyphicon-earphone "></span> 555-5555 <span class="glyphicon glyphicon-envelope"></span> someone#example.com</div>
</div>
I took the contact information and stuck it underneath the image, so when the device is sized to an extra small screen it will not inconvenience the mobile user to see it laying inside of the drop down menu (not a pretty site).
For All Other Sizes:
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-center">
<li class="active">Home
</li>
<li>Our Services
</li>
<li>Current Offers
</li>
<li>Facebook
</li>
<li>Contact Us
</li>
<li class="hidden-xs"><span class="glyphicon glyphicon-earphone"></span> 555-5555
<br/> <span class="glyphicon glyphicon-envelope"></span> someone#example.com</li>
</ul>
</div>
I added your contact information and put it inside of the navigation bar, to be in one single list tag, this way both items will size appropriately and also become hidden as the user is sizing to an extra small device.
DEMO JSFiddle
Related
I have a complex scenario, please have a look at the below screenshots.
When navbar is collapsed on the smaller screen, and I click on the button to expand, the following screen comes out, and it will go only if I click on any of the tabs( about, services etc), click on the top right icon for navbar, wont affect and the drop down menu does not go back.
The second scenario (please refer to the image below), when I expand the screen back from the smaller one, navbar is totally messed up. I dont know what I am doing wrong. Heres the css of my entire navbar.
CSS
.navbar {
height: 80px;
background-color: transparent;
border: none;
color: white;
z-index: 100;
transition: background-color 1s ease 0s;
}
.navbar-default .navbar-brand {
margin-top: 10px;
color: white;
}
.navbar-default .navbar-brand:hover {
color: #C57ED3;
border: 1px solid #C57ED3;
}
.navbar-default .navbar-nav > li > a {
color: white !important;
margin: 10px 5px 5px 5px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li > a:focus {
color: #C57ED3;
border: 1px solid #C57ED3;
}
.navbar-default .navbar-nav > li > a:visited {
color: #C57ED3;
text-decoration: none;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
color: #C57ED3;
}
.navbar-default .navbar-toggle {
border-color: #C57ED3;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #490D40;
}
.navbar-default .navbar-toggle .icon-bar {
color: #C57ED3;
background-color: #C57ED3;
}
.navbar-default .navbar-collapse.collapse.in ul {
background-color: #490D40;
}
html
<nav class="navbar navbar-default 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>
<img src="img/logo.png" width="130px;" height="50px;" style="margin-top: 20px;">
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li><a href="services" >Services</a></li>
<li><div class="dropdown" >
<button class="dropbtn">Work</button>
<div class="dropdown-content">
Web Development
Students
Content Writing
</div>
</div>
</li>
<li><a href="#contact" >Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
In this site, I have this navbar:
picture of the site before
Then, I decided to use the affix bootstrap thing in the navbar, so the user would be able to access it's functions while scrolling down the page. But then, that happened: picture with the affix pluggin
Keeping it simple, the navbar was swallowed by the carousel when I added data-spy="affix" to the tag <nav id="main-navbar" class="navbar navbar-default">. Its important to notice that, once in this position, its fixed in the window as you scroll the page, but not the way it should. And as I can't post any more link, nor can I embed Images, because I'm a noob, I'll just say that it keeps the same position relative to the browser window and the carousel controls stopped working.
This is the html code in body:
<body bgcolor="#f9ffe5">
<div id="main-div" class="container">
<div class="title"> <!--------------------title-------------------->
<div class="logo"><img src="img/logo-big.png" class="img img-responsive logo" /></div>
<br>
<button class="btn btn-success btn-lg btn-Fale-Conosco">Fale Conosco!</button>
</div>
<nav id="main-navbar" class="navbar navbar-default" data-spy="affix"><!-------navbar------->
<div class="navbar-header">
<a class="navbar-brand logo" href="#">
<div class="input-group stylish-input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#titleNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="titleNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Empresa</li>
<li>Produtos <span class="glyphicon glyphicon-cutlery"></span></li>
<li>Trabalhe Conosco</li>
</ul>
</div>
</nav>
<div id="home-page-carousel" class="carousel slide" data-ride="carousel"><!-------carousel------>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#homePageCarousel" data-slide-to="0" class="active"></li>
<li data-target="#homePageCarousel" data-slide-to="1"></li>
<li data-target="#homePageCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive center-block" src="img/carousel/0.jpg" alt="Produtos reforçados em cores variadas e design moderno!">
</div>
<div class="item">
<img class="img-responsive center-block" src="img/carousel/1.jpg" alt="Fabricamos produtos descartaveis! Atendemos e entregamos em todo o Brasil!">
</div>
<div class="item">
<img class="img-responsive center-block" src="img/carousel/2.jpg" alt="Consulte disponibilidade de produtos para pronta entrega! Pagamento facilitado!">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#homePageCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Anterior</span> </a>
<a class="right carousel-control" href="#homePageCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Próximo</span> </a>
</div>
<div class="row centered-row catalog"> <!------catalog(prototype)------->
<div class="col-md-3 col-sm-4 col-xs-6 catalog-item">
<img src="img/products/taca_45_vrm.jpg" class="img-circle img-responsive img-catalog" alt="Taça 45ml">
<h3>Taça 45 ml</h3>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 catalog-item">
<img src="img/products/copo_45_azc.jpg" class="img-circle img-responsive img-catalog" alt="Copo 45ml">
<h3>Copo 45 ml</h3>
</div>
<div class="col-md-3 col-sm-4 col-xs-6 catalog-item">
<img src="img/products/garfo_ref_prt.jpg" class="img-circle img-responsive img-catalog" alt="Garfo Refeição Reforçado">
<h3>Garfo Refeição Reforçado</h3>
</div>
</div>
</div>
Then, the ccs for the custom bootstrap navbar:
.navbar-default {
background-color: #1ba30b;
border-color: #006310;
z-index: 1;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ffffff;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
background-color: green;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #1ba30b;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #ffffff;
background-color: #006310;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
background-color: #006310;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #006310;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #006310;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ffffff;
background-color: #006310;
}
.navbar-default .navbar-toggle {
border-color: #006310;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #006310;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #006310;
}
}
And the css for the custom bootstrap carousel
.carousel .carousel-indicators li{
background-color: transparent;
border-color: forestgreen;
}
.carousel .carousel-indicators li.active{
background-color: forestgreen;
border-color: transparent;
}
.centered-row{
text-align: center;
}
.carousel{
-moz-border-radius: 10px; /* FF1+ */
-webkit-border-radius: 10px; /* Saf3-4, iOS 1+, Android 1.5+ */
border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
overflow:hidden;
z-index: 1000;
}
.carousel-control .glyphicon-triangle-right,
.carousel-control .glyphicon-triangle-left {
display: inline-block;
position: absolute;
top: 50%;
z-index: 5;
}
.glyphicon-chevron-left,
.glyphicon-chevron-right {
color:forestgreen;
vertical-align: middle;
}
Finally the css for the custom search input:
.stylish-input-group .input-group-addon{
background: white !important;
}
.stylish-input-group .form-control{
border-right:0;
box-shadow:0 0 0;
border-color:#ccc;
}
.stylish-input-group button{
border:0;
background:transparent;
}
div.stylish-input-group{
max-width: 187px;
}
I've tried a bunch of different stuff already. I didn't find similar cases also. But I hope it's something simple. Here are some things that I have tried already and didn't work:
wrap <nav> and <div class="carousel slide"> in one more layer of separated <div> tags
change the position property in css
put ids in both, to solve some sort of JavaScript problem with bootstrap.
If your answer is related to one of the above, fear not, it may be slightly different. Also, didn't use the snippet thing because bootstrap wasn't working.
Your navbar z-index value should be higher than the carousel's one.
You also need to give properties to your affix classes :
You must add CSS properties to handle the actual positions, with the exception of position:fixed on the .affix class.
Adding this in your CSS should fix your problems :
navbar.affix{
/* values related to your affixed navbar position (for example, top: 0;) */
z-index: 10000;
}
Have a nice day.
I have a Bootstrap Fixed responsive Navigation Bar with an image on the left of the buttons. I used media queries to make the spacing responsive and now I have this code:
My CSS:
.nav > li > a:hover
{
background-color: #FCC;
}
.navbar-header
{
float: right;
}
.navbar-default
{
background-color: #00b5fe;
border-color: #0089ff;
}
.navbar-default .navbar-brand
{
color: #ffffff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus
{
color: #ffffff;
}
.navbar-default .navbar-text
{
color: #ffffff;
}
.navbar-default .navbar-nav > li > a
{
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus
{
color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu
{
background-color: #00b5fe;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a
{
color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus
{
background-color: #0089ff;
color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider
{
background-color: #00b5fe;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus
{
background-color: #0089ff;
color: #ffffff;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus
{
background-color: #0089ff;
color: #ffffff;
}
.navbar-default .navbar-toggle
{
border-color: #0089ff;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus
{
background-color: #0089ff;
}
.navbar-default .navbar-toggle .icon-bar
{
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form
{
border-color: #ffffff;
}
.navbar-default .navbar-link
{
color: #ffffff;
}
.navbar-default .navbar-link:hover
{
color: #ffffff;
}
#media (max-width: 767px)
{
.navbar-default .navbar-nav .open .dropdown-menu > li > a
{
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus
{
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus
{
background-color: #0089ff;
color: #ffffff;
}
}
#media (min-width: 767px)
{
body
{
padding-top: 230px;
}
}
#media (max-width: 767px)
{
body
{
padding-top: 130px;
}
}
#media (min-width: 768px)
{
#resize
{
width: 30%;
}
}
#media (min-width: 768px)
{
#alignp
{
text-align: center;
}
}
And My HTML:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" id="navbar-blue">
<div class="container-fluid">
<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>
</div>
<p></p>
<p id="centerp">
<img align="left" id="resize" width="60%" src="../logo.png" alt="Coding Kids" style="display:block; margin-left: auto; margin-right: auto; margin-bottom: 20px;">
</p>
<br />
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a></a></li>
<li class="active">Home
</li>
<li>About
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="/">Products<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Silver
</li>
<li>Silver+
</li>
<li>Gold
</li>
<li>Gold+
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img src="images/register.png" width="20"> Sign Up
</li>
<li><img src="images/login.png" width="20"> Login
</li>
</ul>
</div>
</div>
</nav>
<div id="signUp" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<p>Sign Up Box Goes Here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="logIn" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<p>Login Box Goes Here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="well">
{tag_pagecontent}
</div>
<div class="panel panel-default" style="background-color: black; clear: both;">
<div class="panel-body" style="background-color: black; color: white;">© Coding Kids</div>
</div>
A working version of this page is here.
As you can see in my working version, as you resize the window, the logo changes position. At the moment, it doesn't look very neat as it keeps changing position. All I want is for the logo to always be centred horizontally and vertically in the space it has. How would I go about editing my CSS and media queries to suit this?
Just changing the alignment should do the trick.
<img align="centre" id="resize" width="60%" src="../logo.png" alt="Coding Kids" style="display:block; margin-bottom:20px;>
If it doesn't try adding a div and settling the image in it:
<div align="centre"><img align="left" id="resize" width="60%" src="../logo.png" alt="Coding Kids" style="display:block; margin-left: auto; margin-right: auto; margin-bottom: 20px;"></div>
You can also use the
<div style="text-align:centre;">
CSS rule instead.
I'm new to css and i'm doing a simple project, I have put 2 navbars in my website. First navbar is the default one. The second one passes on top of that when I click a button in the 1st navbar. Due to poor configuration of the css file I have overridden the below one. Some links are not working (login link). How do I separate them. I used two examples to do this.
This is the css file.
The first Navbar
.navbar-default {
background-color: #022436;
border-color: #2b4156;
}
.navbar-default .navbar-brand {
color: #fdfdff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
color: #029fe5;
}
.navbar-default .navbar-text {
color: #fdfdff;
}
.navbar-default .navbar-nav > li > a {
color: #fdfdff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #029fe5;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #022436;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #fdfdff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #029fe5;
background-color: #2b4156;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
background-color: #022436;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #029fe5;
background-color: #2b4156;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
color: #029fe5;
background-color: #2b4156;
}
.navbar-default .navbar-toggle {
border-color: #2b4156;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #2b4156;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fdfdff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #fdfdff;
}
.navbar-default .navbar-link {
color: #fdfdff;
}
.navbar-default .navbar-link:hover {
color: #029fe5;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #fdfdff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #029fe5;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #029fe5;
background-color: #2b4156;
}
}
This is code is for the login css code
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
font-size:12px
}
#login-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc;
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
#media(max-width:768px){
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top:0 none;
}
}
This is the 2nd navbar (drops over the 1st navabar when a button is cilcked)
.navbar-brand { position: relative; z-index: 2; }
.navbar-nav.navbar-left .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; transition: transform 0.3s; }
.navbar .navbar-collapse { position: relative; overflow: hidden !important; }
.navbar .navbar-collapse .navbar-left > li:last-child { padding-left: 100px; }
.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0px; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 50%; }
.navbar.navbar-default .nav-collapse { background-color: #f8f8f8; }
.navbar.navbar-inverse .nav-collapse { background-color: #222; }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: left; }
.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }
.navbar-nav.navbar-left .btn:not(.collapsed) {
background-color: rgb(111, 84, 153);
border-color: rgb(111, 84, 153);
color: rgb(255, 255, 255);
}
.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
height: auto !important;
transition: transform 0.3s;
transform: translate(0px,-50px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
transform: translate(0px,0px);
}
#media screen and (max-width: 767px) {
.navbar .navbar-collapse .navbar-left > li:last-child { padding-left: 15px; padding-right: 15px; }
.navbar .nav-collapse { margin: 7.5px auto; padding: 0; }
.navbar .nav-collapse .navbar-form { margin: 0; }
.nav-collapse>li { float: none; }
.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
transform: translate(-100%,0px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
transform: translate(0px,0px);
}
.navbar.navbar-default .nav-collapse.slide-down,
.navbar.navbar-inverse .nav-collapse.slide-down {
transform: translate(0px,-100%);
}
.navbar.navbar-default .nav-collapse.in.slide-down,
.navbar.navbar-inverse .nav-collapse.in.slide-down {
transform: translate(0px,0px);
}
}
If I anyone can explain how do i separate them using names or numbers, that would be appreciated.
This are the navbars both are included in the header tags
<div class="navbar-header">
<a class="navbar-brand" href="#/">Web Name</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li><span class="glyphicon glyphicon-home"> Home</span></li>
<li><span class="glyphicon glyphicon-star"> About us</span></li>
<li><span class="glyphicon glyphicon-phone-alt"> Contact us</span></li>
<li><a class="btn btn-default btn-outline btn-circle collapsed" data-toggle="collapse" href="#nav-collapse1" aria-expanded="false" aria-controls="nav-collapse1">Categories</a></li>
</ul>
<ul class="collapse nav navbar-nav nav-collapse" id="nav-collapse1"> <!--The 2nd Navbar-->
<li>Action 1</li>
<li>Action 2</li>
<li>Action 3</li>
<li>Action 4</li>
</ul>
<!--</div>-->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"> Sign up</span></li>
<li class="dropdown">
<span class="glyphicon glyphicon-log-in"></span> Log-in <b class="caret" style="color:white"></b>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via,
<div class="social-buttons">
<i class="fa fa-facebook"> Facebook</i>
<i class="fa fa-twitter"> Twitter</i>
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="inputEmail">E-mail</label>
<input type="email" class="form-control" id="inputEmail" placeholder="E-mail address" required />
</div>
<div class="form-group">
<label class="sr-only" for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required />
<div class="help-block text-right">Forgot password?</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block"> Sign in </button>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> Keep me logged-in
</label>
</div>
</form>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Not really sure you meant 2nd navbar or a dropdown menu within the navbar. The way you build your navbar I'm assuming you want one navbar and a dropdown within that navbar.
Here's a working version http://plnkr.co/edit/EDogb0HQhRzqOlaLng7J
Hope this is what you're trying to achieve.
There are several things that are missing from your code.
I've added the button menu for mobile collapse all.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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>
You want to insert the 2nd inside the first to create the dropdown.
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#/">
<span class="glyphicon glyphicon-home"> Home</span>
</a>
</li>
<li>
<a href="#/about">
<span class="glyphicon glyphicon-star"> About us</span>
</a>
</li>
<li>
<a href="#/contact">
<span class="glyphicon glyphicon-phone-alt"> Contact us</span>
</a>
</li>
<li class="dropdown">
<a class="btn btn-default btn-outline btn-circle dropdown-toggle" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Categories</a>
<ul class="dropdown-menu" id="nav-collapse2">
<!--The 2nd Navbar-->
<li>
Action 1
</li>
<li>
Action 2
</li>
<li>
Action 3
</li>
<li>
Action 4
</li>
</ul>
</li>
</ul>
I'm NOT a computer programmer, but I've been assigned the task of designing a webpage. Here's what I have:
<!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">
<title>Example</title>
<!-- Bootstrap -->
<link href="file:///Users/Theresa/Desktop/1page/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="all">
<!---Custom -->
<link href="file://localhost/Users/Theresa/Desktop/1page/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="navbar-header">
shastic
</div>
</nav>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="#">Shastic</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Text</li>
<li><span class="glyphicon glyphicon-log-in"></span> Text</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="background: #f1f1f1;;">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3" style="background-color:#f1f1f1;">
<h1 style=" font-weight: 300; font-size: 72px; color: #666666; margin-bottom: -22px;">01</h1>
<h2 style="font-size: 26px; font-weight: 300; color: #666666; text-transform: uppercase; -webkit-font-smoothing: antialiased;">overview</h2>
<p style="font-size: 12px;
-webkit-font-smoothing: antialiased;">
Jump to same section in another guide:</p>
Web | Homepage
</div>
<div class="col-sm-9 col-md-3 col-lg-3" style="background-color:#f1f1f1; font-size: 20px; font-weight: 300; color: #666666;-webkit-font-smoothing: antialiased; display: block; margin-right:-10px; margin-top:50px; text-align: center;">
The designs in this guide cover the visual treatment and interaction details for the mobile SSO pages from the below the top navigation bar. They also provide an overview of how the navigation works for Mobile SSO pages.
</div>
<div class="ol-sm-3 col-md-6 col-lg-6" style="background-color:#f1f1f1; padding: 20px;">
<img src="file:///Users/Theresa/Desktop/1page/images/iphone.png"><BR>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="file:///Users/Theresa/Desktop/1page/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Basically, my HTML is really complicated because I can't for the life of me figure out how to override bootstrap's CSS (fonts,etc.) for the container section. Another problem I'm having is I can't change the OVERALL body background color from white to another color.
Here's my CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
</HEAD>
<body>
<style>
/* navbar */
.navbar.navbar-default {
background-color: #0078B1;
border-color: #E7E7E7;
}
.navbar.navbar-inverse {
background-color: #003B6A;
border-color: #003B6A;
margin-bottom: -20px;
padding-bottom: 20px;
}
.container-fluid{
background-color: #0078B1;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
-webkit-font-smoothing: antialiased;
text-align: right;
}
/* title */
.navbar-default .navbar-brand {
color: #FFF;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #0078B1;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #FFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #FFF;
text-decoration: underline;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #FFFFFF;
background-color: #0078B1;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #FFF;
background-color: #0078B1;
}
/* dropdown and caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #FFF;
border-bottom-color: #FFF;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #0078B1;
border-bottom-color: #0078B1;
background-color: #0078B1;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #0078B1;
border-bottom-color: #0078B1;
}
/* mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #FFF;
}
/*body*/
.container{background-color: #0078B1;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
-webkit-font-smoothing: antialiased;
text-align: right;}
</style>
</body>
</HTML>
Any help appreciated. thank you very much.
Change navbar color in Twitter Bootstrap 3
Changing the navbar color has been discussed in detail at this link
Bootstrap comes with light/dark options by default - however if you want custom colour best read the details in the link above so were not duplicating too much info here.
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>