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>
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.
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 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 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 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>