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.
Related
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>
I need to reuse the boostrap navbar on all pages so I been trying to have a single file for the menu and render it using a ng-include angularJS tag
The menu is this file /partials/top_menu.html
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<a class="navbar-brand" href="index.html">EXAMPLE</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 navbar-right">
<li>
Quienes Somos
</li>
<li>
Organización
</li>
<li>
Servicios
</li>
<li>
Clientes
</li>
<li>
Galeria
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
And here is the index.html that tries to include that partial as the navigation menu of the page
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>TITLE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div ng-include="'partials/top_menu.html'"></div>
</nav>
<body>
The problem is that the menu bar is not being render at all and the WebDeveloper console does not show any error or file missing
What am I doing wrong or if this is the wrong aproach to do it let me know can I achieve it
You need to add the ng-app to the body tag of your index.html
<body ng-app>
This is AngularJS bootstraping directive. Without this, the AngularJS process does not start.
And you need to do that for any html file that needs to use angularJS directives
Use this script may be it help you :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Must include Jquery file.
I'm just following a bootstrap tutorial, but I got stuck with some weird thing.
chrome and safari show mobile collapse differently with the same code.
I even tried 'copy and paste'!!
this is mobile nav-collapse on safari which it is a correct view.
but on chrome, it just doesn't work somehow.
this is the same one on chrome.
i got no error on console.
I used bower to download jquery and bootstrap.
this is the html code.
main.js and main.css are just empty files.
this is just a very basic bootstrap... but I don't know why..
how can I fix it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Design Tutorial | RevillWeb.com</title>
<!-- Include bootstrap CSS -->
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/assets/main.css">
</head>
<body>
<!-- Site header and navigation -->
<header class="top" role="header">
<div class="container">
<a href="#" class="navbar-brand pull-left">
BS3 TUTORIAL
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="navbar-nav nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!-- Include jQuery and bootstrap JS plugins -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/main.js"></script>
</body>
</html>
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>
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.