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.
Related
When navbar collapse (when it shows the toggle icon), the menu (home, services, portfolio, about,contact) is over the logo. If I take the position:absolute from the logo (nag-bar-brand) the menu appears in the center. If there away to have the menu below the logo. I hope you understand my question. English is not my first language. Thank you.
HTML
<!--navbar-->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>`enter code here`
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img id="brand-image" src=""><img src="images/logo.png" class="img-responsive" alt="website logo">
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Service</li>
<li>Portfolio</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</div><!--end navbar-->
css:
.navbar {
background-color:#FFF;
border-radius: 0 px;
min-height: 85px;
}
.navbar-nav{
padding-top: 20px;
letter-spacing: 0.05em;
}
.navbar-nav > li{
padding-left:20px;
}
.navbar .nav >li > a:hover{
color: #19bcb9;
}
.navbar-brand{
position:absolute;
}
If the image is too big this will happen. Limit the image with max-height max-width
simply put the image size to 100%. this should work!
.img {
img-size:100%;
}
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 was looking for very long time for pretty solution for dynamic affix with Bootstrap 3 and finally my simply solution is below. Everything works great, except one feature. When i resize website to mobile and expand menu, whole list of menu items is transparent. When i starting scroll down, after the moment when navbar is affixed transparent problem does not exist. I read some posts that it can be caused by relative position for navbar but dont know how resolve this problem and dont loss my functionality.
<div id="nav-wrapper">
<div id="nav" class="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>
</div>
<div class=" collapse navbar-collapse navbar-center" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">ZESPÓL</li>
<li>ZAPLECZE</li>
<li>GALERIA</li>
<li>MATERIALY</li>
<li>KONTAKT</li>
</ul>
</div>
</div>
</div>
<!-- navbar -->
</div>
js:
function myaffix() {
var affixoffset = $('.navbar-inverse').offset().top
$('#nav-wrapper').height($(".navbar-inverse").height());
$(window).scroll(function() {
if ($(window).scrollTop() <= affixoffset) {
$('.navbar-inverse').removeClass('affix');
} else {
$('.navbar-inverse').addClass('affix');
}
});
};
$(document).ready(function() {
myaffix();
$(window).on("resize", function() {
myaffix();
});
});
and part of my css:
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
#nav > .navbar-inner {
border-left: 0;
}
.navbar-toggle
{
float:none;
}
.navbar-header
{
text-align:center;
}
.navbar-inverse .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar-inverse .navbar-collapse {
text-align: center;
}
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 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