I'm building a site using the twitter bootstrap CSS, but I've run into a problem.
nav bar example
If you look towards the end, "Bootstrap" is sort of hidden; it only lights up when you mouseover it (but it is, by default, black). How do I get this functionality for a button in my webpage?
Here's my navbar:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li class="">
Tutoring
</li>
<li class="">
Competitions
</li>
<li class="">
Board Members
</li>
<li class="">
Info
</li>
<li class="">
<span class="span5"></span>
</li>
<li class="" id="algebrayall">
<a class="brand pull-right" style="color:black" href="./index.html">It's just algebra, y'all</a>
</li>
</ul>
</div>
</div>
</div>
</div>
I want the <a class="brand pull-right" style="color:black" href="./index.html">It's just algebra, y'all</a> part to work like their Bootstrap button.
It's not part of Bootstrap.css. It is part of the twitter documentation website css (docs.css).
This is the base brand styling:
body > .navbar .brand {
padding-right: 0;
padding-left: 0;
margin-left: 20px;
float: right;
font-weight: bold;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
And the hover effect:
body > .navbar .brand:hover {
text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
}
.navbar-inverse .brand:hover, .navbar-inverse .nav > li > a:hover, .navbar-inverse .brand:focus, .navbar-inverse .nav > li > a:focus {
color: #ffffff;
}
There might be some more styling that makes up the full effect, but that should get you started.
The problem is you are overriding the text color of brand using inline style which overrides the bootstrap styles
Instead of using inline styling for changing the color of brand, use a class
.navbar-inverse.navbar .brand {
color: black;
}
Demo: Fiddle
Important
But I think the correct solution will be to create a custom version of bootstrap by changing the #navbarBrandColor property to what ever you want instead of manually overriding the style in your css file
Related
Uncaught Error: Bootstrap's JavaScript requires jQuery
at bootstrap.min.js:6
The navbar doesn't resize when using Google-Chrome's Toggle Device Toolbar. I found a similar question where the problem was solved by making sure the .js files are getting loaded properly. But in my case this doesn't work.
However, the same works fine in Firefox.
.navbar {
margin-bottom: 0;
background-color: #0E293C;
z-index: 99;
border: 0;
font-size: 14px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: 'Muli', sans-serif;
}
.navbar li a,
.navbar .navbar-brand {
color: #19BBD5 !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
color: #C6DAEC !important;
background-color: #0E293C !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
<nav class="navbar navbar-default navbar-fixed-top">
<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="#">Company Name</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Updates</li>
<li>About</li>
<li>How to use</li>
<li>Pricing</li>
<li>Contact</li>
<li>Find Us</li>
</ul>
</div>
</div>
</nav>
The website has been written by following this tutorial
The root cause of this issue was that I had an <iframe> element which was not getting loaded properly. Thus the Error404 box wasn't resizing.
In CSS I added overflow-x:hidden under body this made sure that navbar gets resized when I open my bootstrap website on screens of different sizes. And in my html contained the <iframe> element in container.
Here's my fiddle of my html/bootstrap code.
<body>
<h1 style="text-align:center">AntwerPay</h1>
<!--Navbar-->
<nav class="navbar navbar-inverse">
<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="#">AntwerPay</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Gebieden
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Gebied 1</li>
</ul>
</li>
<li>Alle Gebieden</li>
</ul>
</div>
</div>
</nav>
</body>
As you can see in my navbar everything is aligned real nicely to the left. This is a problem for me. I want the navbar-brand to be on the left, and i want the 3 other buttons to be centered. I have researched this a lot and found various .css codes but none worked for me.
You can do this using CSS, I've included a suggestion for manually adjusting the position of the items:
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
/* You'd have to adjust this whenever an item is added to the nav-bar */
margin-right: 10%;
}
.navbar .navbar-collapse {
text-align: center;
}
This has been answered already here
Along with your (Again) updated fiddle here
use this snippet
.navbar-bav { float: none !important; text-align:center; }
.navbar-nav > li { display:inline-block; float: none !important; }
Updated fiddle
Remember
If you do NOT know how to make the navbar responsive, then implement the codes above in a #media (min-width: 768px) query in order not to fail the responsiveness of Bootstrap Navbar.
Hope this works for you:
#myNavbar {
text-align: center;
}
.navbar-nav {
margin: 0 auto;
display: inline-block;
float: none;
}
Make shure to keep an eye on the mobile view.
I am trying to reposition a search form/button inside of my navbar with lingering problems. My CSS has changed many times, and I have gotten the form and button to move, but into weir alignment that either changes the nav bar or the search form. Here is my current CSS, which shows no changes from the default bootstrap state. I want to make the search form a little longer, and have the bar and form move slightly down and to the left, in position with the nav list:
<html>
<head>
<!-- Imported documents -->
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<link rel = "stylesheet" href = "css/styles.css">
<meta charset="utf-8">
<title>TesterPage.</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menuIcon" 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>
<!-- Brand Logo -->
<a class="navbar-brand" href="#">
<img alt="Brand" src="assets/logo.gif" class="img-responsive" id="brandImage" />
</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="dropdown">
About
</li>
<li class="dropdown">
Blog
</li>
<li class="dropdown">
Resume
</li>
<li class="dropdown">
Portfolio
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<label for="search" class="sr-only">Search Bar</label>
<input type="text" name="search" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.container {
background:#30302f;
}
.container a{
color: #fff;
}
.container a:hover{
text-decoration: underline;
color: #fff;
}
.menuIcon {
background:rgb(200,200,200);
}
.navbar-brand {
height:auto;
}
.navbar-default {
background-color: #30302f;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 14px 14px;
top: 16px;
left: -50px;
text-transform: uppercase;
}
.navbar-form .navbar-right .form-class{
left: -30px;
top: 100px;
}
.navbar-default .navbar-nav>li>a:hover {
color: #fff;
text-decoration: underline;
}
#brandImage {
max-width:60%;
}
#media (max-width:600px) {
.navbar-brand {
width:95%;
padding:8px 2.5%;
}
#brandImage {
max-width:100%;
}
}
#media (min-width:990px) and (max-width:1200px) {
.navbar-brand {
width:250px;
}
}
Many thanks!
EDIT: I still try and edit the CSS code, and it slides my nav header to the left on the index, and misaligns it in other working pages :/
I'm using Bootstrap 3 to construct a responsive menu like so:
Logo Link 1 Link 2 Link 3 Link 4 (scales down to toggle in smaller devices)
The following does that, except when I choose to go with a larger logo image (440px by 140px) two problems occur 1) The navigation menu items rise to the top 2) In smaller devices, the logo doesn't seem to be responsive (doesn't scale down to fit screen)
Desktop view:
Mobile view:
My goals are 1) logo and links aligned vertically on the same line 2) logo scales down to smaller size to make room for navigation toggle
<div class='jumbotron grey-bg'>
<div class='container-fluid'>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-bar">
<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="#">My Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav-bar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class='active'><a href='#'>Link 2</a></li>
<li>Link 3</li>
<li><a href='#'>Link 4</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div><!-- /.container-fluid -->
</div><!--- end jumbotron -->
/* logo */
.navbar-brand {
width: 440px;
height: 140px;
background: url(img/logo.jpg) no-repeat;
text-indent: -999px;
padding: 0px;
margin: 0px;
}
/* end */
/* navigation */
.navbar-default {
border: none;
padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a {
color: #666;
padding: 11px 0;
text-align: center;
}
.navbar-default .navbar-nav>li>a:hover {
text-decoration: underline;
color: #666;
}
/* end */
img {
display: block;
height: auto;
max-width: 100%;
}
If you want the image to be responsive, don't make it a background image (include in html) and add the class "img-responsive":
<a class="navbar-brand" href="#"><img src="img/logo.jpg" class="img-responsive"></a>
how to reduce the white space between the navigation bar and the banner.....
i reduced the padding and margin but its not getting affected....
providing my code below.....
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" style="padding-top: 0px;">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav">
<li class="active">Product</li>
<li>Solutions</li>
<li>Services</li>
<li class="iphonePartnerLink">Partners</li>
<li class="iphoneContactLink">Contact</li>
</ul>
<ul class="nav" id="navSecond">
<li class="">Partners</li>
<li>Contact</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
navbar .navbar-inner {
background: #fff;
color: #000;
box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
text-shadow: none;
padding: 20px 0 10px; <--- remove this
}
Put following CSS rules at the end of your css. I think it will fix your problem.
.home { padding-top: 47px !important; }
.home article.container { margin-top: 0px !important; }
.navbar { height: 47px !important; }
.navbar .brand { padding: 0 20px 10px !imporatnt; }
You are using bootstrap responsive, check your page in smaller browser width.
Bootstrap is creating collapsible menu which doesn't seems good with the current background!
Also I would recommend you to not make changes on bootstrap files, it will make it impossible to update your libraries. Instead you can overwrite them.