I coded a navigation bar with three links. The navigation bar should be responsive which means that if the window becomes small enough the links should disappear (as they do) and a new button with three horizontal lines should appear (which does not).
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="btn btn-navbar" 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" href="/server">APL</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">
<li class="active">Impressum</li>
<li class="active">Documentation</li>
</ul>
</div>
</div>
</div>
</nav>
Why does the button in the following JSFiddle demo stay invisible (same markup)?
http://jsfiddle.net/BaR3q/22/
The menu button is there, but it's white so you can't see it.
Add navbar-inverse class to the navbar and it shows up:
http://jsfiddle.net/BaR3q/23/
UPDATE
Your original question only asked “Why does the button in the following JSFiddle demo stay invisible” and my above jsfiddle example solved that. But per your comment below, I looked at your jsfiddle again.
The reason the menu button wasn't toggling the menu was you didn't have a valid link to bootstrap.min.js nor did you preload jQuery. After adding both, you can see your demo works: http://jsfiddle.net/BaR3q/25/
This is a JsFiddle issue.
I already got this one, with a Bootstrap-3 navbar. Your code perfectly works, you can try it in a blank file. You can also copy paste the Bootstrap-3 navbar example to see the issue.
A working JSBin.
Bootstrap's JavaScript was incorrectly linked in the jsFiddle. It was added without an http:// and was linking to jsfiddle.net.
Also, Bootstrap's JavaScript requires jQuery, but the Fiddle did not include it.
I fixed the reference to Bootstrap's JS and added jQuery as a dependency. I also inverted the colors on the navbar so you could see it more easily with navbar-inverse. Everything works great:
http://jsfiddle.net/BaR3q/24/
I put your menu code into my boilerplate BS3 nav bar template and it works. Tested in Firefox 17, Chrome 29 and IE8 (I my environment I have to support IE8, so I included some info about that, too). Let me know if you have need anything else or have any questions.
UPDATE: JSFiddle Demo
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--
SET UP THE FOLLOWING FOR YOUR ENVIRONMENT IF YOU WANT TO SUPPRT IE8.
See https://github.com/scottjehl/Respond for more. Note that the Respond.js script
will not function locally in IE8 due to browser security restrictions.
-->
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="btn btn-navbar"
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" href="/server">APL</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Impressum</li>
<li>Documentation</li>
</ul>
</div>
</nav>
</body>
</html>
Related
This question already exists:
Finding to position logo on bootstrap very difficult
Closed 5 years ago.
I am trying to position my logo at the top left, inside the navbar.
My logo will not respond when I try to position it to the far-left of the navbar using 'margin-right'.
When I position the logo to the left, it is pushing the menu out to the right to the middle of the navbar.
Could anyone give me advice?
Thank you.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Arabella Hill</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" 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="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='#'><img src="img/arabella.png" class="img-responsive" img style="max-width:300px; margin-top:-80px; margin-right: 100px;"></a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li class="dropdown">
Themes<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Admin & Dashboard</li>
<li>Admin 1</li>
<li>Admin 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Have you tried using "margin-left" with a negative value?
... margin-top:-80px; margin-left:-20px; ...
You may need to alter the value to suit the image dimensions.
There may be some other styling on the .navbar or .navbar- header classes that's pushing it right.
Have a look on the the browser inspection tool to check these DIVs for extra styling.
Get rid of the margin-right on your logo. That is pushing your nav to the right.
I would advise putting your styles in a CSS file but if you're going to do inline try something like this if you want it against the left side of the screen
<a class="navbar-brand" href='#'><img src="img/arabella.png" class="img-responsive" style="max-height:50px; margin-top:-80px; margin-left: -30px;"></a>
I would also advise using the developer inspector on your browser to see how padding and margin are affecting the logo.
I'm learning HTML and CSS on my own by resources available online.
I took this template using Bootstrap and made it my own using my content. I have the problem that when I make changes to style on CSS, these changes doesn't take effect on the page when refreshing.
It looks like CSS doesn't over ride some code in the Bootstrap. Any suggestion or correction into making style effective?
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="icon" href="../../favicon.ico">
<title>Home Cleaning Services in the SF Bay Area</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
<nav class="navbar navbar-inverse 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>
<a class="navbar-brand" href="#">Sparkling Cleaning SF</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Estimates</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron">
<div class="container">
<img class="Cleaning-Logo" src="img/SparklingCleanLogo.jpg">
<h1>Cleaning Services in the SF Bay Area</h1>
<p>With a growing economy and a vibrant style of life, the SF Bay area has become home for professionals, families, artists and everyone who wants to be part of this great region.
Due to this, it’s very difficult to devote time to clean or organize our space where we live or work.
Sometimes we say to ourselves we will get to clean up our stubborn room or bathroom, but we don’t get to do it because you don’t have the time or the least thing you would like to do in your free time is to get to the obstinate place.</p>
</div>
<section>
</section>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap.js"></script>
Grails 2.4.5 here. I believe I have installed the Twitter Bootstrap-Grails plugin correctly, but I'm having some problem with it. Then again I'm not all that familiar with Asset Pipeline so I may have missed something. Here are the exact set of steps I took:
First I added the following to my BuildConfig:
plugins: {
// lots of other plugins up here...
runtime ':twitter-bootstrap:3.3.5'
}
Then I modified my grails-app/views/layouts/main.gsp to look like:
<!DOCTYPE html>
<html>
<head>
<title><g:layoutTitle default="Grails"/></title>
<asset:stylesheet src="application.css"/>
<g:layoutHead/>
</head>
<body>
<g:layoutBody/>
<asset:javascript src="application.js"/>
</body>
</html>
Then I changed my grails-app/views/index.gsp to look like:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
</head>
<body>
<nav class="navbar navbar-inverse 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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</body>
</html>
Then at the command-line I ran:
grails clean
grails refresh-dependencies
grails run-app
The app starts up just fine, but when I open a browser and go to http://localhost:8080/myapp (index.gsp) it is obvious that no styling has been applied to any of the text (it's all plain-looking). So clearly Grails isn't finding the Bootstrap JS/CSS resources.
Any ideas as to why?!?
Your template must contain a reference to the layout file, like so:
<html>
<head>
<meta name="layout" content="main">
</head>
<body>
</body>
</html>
grails-app/assets/javascripts/application.css should only contain:
/*
*= require bootstrap
*/
and grails-app/assets/javascripts/application.js should contain:
//= require bootstrap
This is to make asset-pipeline actually include the files. Remove the references to the Grails default styles like main.css, errors.css etc.
I am new to Bootstrap 3.0. Can any one tell me what is significance of 'navbar-brand' class in below code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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">Vacation Rentals</a>
</div>
</div>
</nav>
<div id="body" class="container">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/Scripts/bootstrap.js")
#RenderSection("scripts", required: false)
</body>
</html>
Also, I would like to know something about magical text 'Toggle Navigation'. When I am re-sizing my browser I can see a small rectangle on right hand side of the screen, but where is the text 'Toggle Navigation'?
Thanks,
Hemant Shelar
navbar-brand class is applied to typical branding logo you see in the top navigation bar.It may just contain a typical image logo or text. Refer to the image below to better understand.
Now coming to the second question.
The class applied to Toggle Navigation is sr-only that stands for screen reader only.
According to bootstrap documentation, the class is used to hide information used for screen readers.
To know more about accessibility of site for screen readers I would recommend going through the following .
Invisible Content Just for Screen Reader Users and google web accessibility course
I have the following test code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ti Productions</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a 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>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li>home</li>
<li>about</li>
<li>help</li>
</ul>
</div>
</div>
</div>
</div>
<script src="assets/js/bootstrap-collapse.js"></script>
</body>
</html>
I'm basically trying to test out the collapsable menu shown here:
http://twitter.github.io/bootstrap/components.html#navbar
I've downloaded the boostrap responsive css file as per the instructions, and also the collapse.js file.
The page loads file, with the menu showing. Then when I shrink the browser size, the menu collapses..and the button appears. But I can't open the menu. Whenever i click on the button to display the collapsed menu, I get the following error:
--
[19:08:40.348] TypeError: $ is undefined #
https://myserver/mysite/assets/js/bootstrap-collapse.js:126
line 126 of that file looks like this:
$.fn.collapse = function (option) {
I'm not sure what I'm doing wrong. Any guesstions would be appreciated.
EDIT 1
I've added in the missing jquery.js file but that hasn't resolved the issue.
The includes at the bottom of the page now looks like this:
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
The $ is a jQuery function and needs to be included before the bootstrap-collapse.js.
Try this sequence
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
check if jquery is properly loaded or not . IN Firebug or console try running "$". This type of errors comes , if jquery is not loaded before custom script or their is a conflict with other library using '$' like prototype.