The following code is a part of an html file which utilizes bootstrap. Mainly I want to style <a> which has a class .navbar-brand. To do so I added another class .grandchildlink to <a> (don't pay attention to the name). The problem is that it does not work this way.., the two alternatives were:
1. Using descendant selectors eg. by using the class .parentbody of <body> and then ( .parentbody .grandchildlink:hover, .parentbody .grandchildlink:focus{...})
2. Adding an id attribute to <a> say: grandchildlink_id and then (#grandchildlink_id:hover, #grandchildlink_id:focus {...})
.., the question is why isn't it working with a one class selector ?
.
.
.
<style type="text/css">
.grandchildlink:hover, .grandchildlink:focus {
background-color: transparent;
color: yellow;
}
</style>
</head>
<body class="parentbody">
<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle naviagation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="grandchildlink navbar-brand" >BrandName</a>
<div class="navbar-collapse collapse">
<ul></ul>
</div>
</div>
</div>
.
.
.
Because of css specificity. This is the CSS bootstrap uses.
.navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover {
color: #fff;
background-color: transparent;
}
That means to overwrite it, you need to use .navbar-inverse .grandchildlink {} or something with an equal (as long as your styles come after bootstrap.css) or higher specificity, like you listed in your examples.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar-inverse .grandchildlink:hover, .navbar-inverse .grandchildlink:focus {
background-color: transparent;
color: yellow;
}
</style>
<body class="parentbody">
<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle naviagation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
BrandName
<div class="navbar-collapse collapse">
<ul></ul>
</div>
</div>
</div>
Related
I am creating a small homepage. Depending on the Navbar style (with or without hamburger menu) I want to display the span with id=actualPage. How can I achieve that (JQuery, JavaScript or even with CSS)? - I read a lot about collapse etc but I am not sure if this is the right approach and I have not found any easy solution.
<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 active" href="index.php?p=home">MyPage
<span id="actualPage">- <?= $pages[$activePage] ?></span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
...
</ul>
</div>
</div>
</nav>
Thanks for your help!
Well, if memory serves, Bootstraps Nav collapses to a hamburger at 1200px.
If all you want is for the span to only be visible when uncollapsed just use css with something like:
.mySpan{ display: inline-block;}
#media (min-width: 1200px) { .mySpan{display: none;}}
If you need that ID for some kind of computation and want to to not EXIST then you'd have to use JS to add / remove the ID based on the screen being <1200px
EDIT:
For a JS solution it would be something like:
window.onresize = function() {
if (window.innerwidth<1200px){
document.getElementById("small").id = "big";
}
else{
document.getElementByID("big").id = "small";
}
};
I solved the given problem, by using the hidden classes. - It does not actually solve the question but the origin problem.
In Bootstrap 3:
<a class="navbar-brand active">Test<span id="actualPage" class="hidden-xl hidden-lg hidden-md hidden-sm">- <?= $pages[$activePage] ?></span></a>
In Bootstrap 4:
<a class="navbar-brand active">Test<span id="actualPage" class="hidden-sm-up">- <?= $pages[$activePage] ?></span></a>
Check the following link: Hidden-md-down is not working
I was looking for a sidebar to my admin template and I wanted to use jasnybootstrap.
My goal was to resize the content and do not translate out of the screen.
A similar effect is this http://startbootstrap.com/template-overviews/simple-sidebar/
I hope someone can tell me if it is possible to obtain such a result.
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
<a class="navmenu-brand" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Jasny Bootstrap starter template</h1>
<p class="lead">Use this fiddle to demonstrate an issue with Jasny Bootstrap or to show an example using Jasny Bootstrap.</p>
</div>
</div>
</div>
http://jsfiddle.net/k9K5d/13/
Thanks in advance
I have made it using CSS.
#myNavmenu ~ .container {
padding-left: 10px;
}
#myNavmenu.canvas-slid ~ .container {
padding-left: 320px;
}
http://jsfiddle.net/k9K5d/14/
I have made it using Jquery.
http://jsfiddle.net/k9K5d/15/
// JS
$(".navbar-toggle").click(function(e) {
e.preventDefault();
$(".container").toggleClass("slide");
});
// CSS
.container.slide {
padding-left: 10px;
}
.container {
padding-left: 320px;
}
http://jsfiddle.net/k9K5d/15/
You just need to make a change in padding-left property for class 'container'.
In my node.js application, I've been using EJS as a template engine. But due to some limitations, I decided to switch to Jade.
In my homepage, I have a navbar produced by Bootstrap 3. Inside this navbar, I have a form with 2 buttons.
When I used EJS, these buttons were space-separated, exactly like in Bootstrap's navbar documentation :
But when I switched to Jade, the result was :
I tried with the code from Bootstrap's navbar documentation, and I got the same issue : no spaces with Jade. (http://getbootstrap.com/components/#navbar)
And my body contains 2 divs. With EJS, I had a space between them (I supposed it was some Bootstrap's magic), none with Jade
I checked all my files twice. They contain exactly the same CSS, the same markup.
I'm struggling with this issue. Can you help me ?
Thanks in advance.
EDIT: Here is the code, I took a very basic example from bootstrap's documentation
Jade
<!DOCTYPE html><html><head><title>Express</title><link rel="stylesheet" href="/stylesheets/style.css"><link rel="stylesheet" href="/js/bower_components/bootstrap/dist/css/bootstrap.min.css"><script src="/js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script></head><body><nav role="navigation" class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" class="navbar-toggle collapsed"><span class="sr-only">Activer la navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"><form id="uploadFileForm" role="send" enctype="multipart/form-data" class="navbar-form navbar-left"><div class="form-group"><input id="textFile" type="text" placeholder="Envoi de fichier" class="form-control"></div><button type="submit" class="btn btn-default">Envoi</button></form><p class="navbar-text navbar-right">Express</p></div></div></nav></body></html>
Template
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet', href='/js/bower_components/bootstrap/dist/css/bootstrap.min.css')
script(src='/js/bower_components/bootstrap/dist/js/bootstrap.min.js')
body
nav.navbar.navbar-default(role='navigation')
div.container-fluid
div.navbar-header
button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
span.sr-only Activer la navigation
span.icon-bar
span.icon-bar
span.icon-bar
div#bs-example-navbar-collapse-1.collapse.navbar-collapse
form#uploadFileForm.navbar-form.navbar-left(role='send', enctype='multipart/form-data')
div.form-group
input#textFile.form-control(type='text', placeholder='Envoi de fichier')
button.btn.btn-default(type='submit') Envoi
p.navbar-text.navbar-right= title
EJS
<!DOCTYPE html>
<html>
<head>
<title>Express</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/js/bower_components/bootstrap/dist/css/bootstrap.min.css' />
<script src="/js/bower_components/bootstrap/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Activer la navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" role="send" enctype="multipart/form-data" id="uploadFileForm">
<div class="form-group">
<input type="text" id="textFile" class="form-control" placeholder="Envoi de fichier">
</div>
<button type="submit" class="btn btn-default">Envoi</button>
</form>
<p class="navbar-text navbar-right">Express</p>
</div>
</div>
</nav>
</body>
</html>
Template
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/js/bower_components/bootstrap/dist/css/bootstrap.min.css' />
<script src="/js/bower_components/bootstrap/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Activer la navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" role="send" enctype="multipart/form-data" id="uploadFileForm">
<div class="form-group">
<input type="text" id="textFile" class="form-control" placeholder="Envoi de fichier">
</div>
<button type="submit" class="btn btn-default">Envoi</button>
</form>
<p class="navbar-text navbar-right"><%= title %></p>
</div>
</div>
</nav>
</body>
</html>
style.css
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
Jade by default removes all spaces from html. That leads for boostrap to format buttons together.
Write buttons this way:
button.btn.btn-primary Button 1
= ' '
button.btn.btn-primary Button 2
= ' '
button.btn.btn-primary Button 3
Using this thread I carried out my header into the individual html file
header.html:
<div class="navbar navbar-default navbar-fixed-top" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" 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>
</div>
<div class="navbar-collapse collapse" role="navigation" style="height: auto;">
<ul class="nav navbar-nav">
<li>Page1</li>
<li>Page2</li>
</ul>
</div>
</div>
</div>
and included it in my index.html.
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
$("#navbar-header").load("header.html");
$("#footer").load("footer.html");
});
</script>
and
<div id="navbar-header"></div>
My question is, how to apply 'active' class on selected page (page1 and page2)?
<li class="active">Equator Server</li>
You can call a jQuery Click() event on target element by adding a click event listener on source element (an element which should activate a link on another html).
$('.icon-bar-1').on('click', function(){
$('.page-1').click(function(){/* code to perform on targetted click listener */});
});
It is possible to use jQuery's .addClass(), using specific class in the html,
for example
HTML-file to add menu
<div class="class1" id="navbar-header"></div>
separate file with header
$(document).ready(function () {
if ($( "#navbar-header" ).hasClass( "class1" )) {
$("#id-to-add").addClass("active");
}
});
In my code, I have a persistent gap at the very top of my page that appears to be set to the tag by Bootstrap. I have searched via Firefox's inspector and have found nothing. Trying to add margin: 0; padding: 0; to the tag has done nothing either.
The #intro div here should be right at the top, but the space appears above it.
<body>
<div id="intro" style="width: 100%; padding:0; margin:0; text-align:center;">
<h2>Test</h2>
</div>
<nav class="navbar navbar-default" role="navigation" style="margin: 0; opacity: 0.95;">
<div class="container-fluid">
<!-- 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="#" id="brand-mobile">Map My Cash</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="text-align: center;">
<ul class="nav navbar-nav" id="navbar-media-query" style="float: none; display: inline-block;">
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
#RenderBody()
</body>
You will have to override the default css.
Add following CSS after the default bootstrap CSS you are using:
body{
padding-top:0px;
margin-top: 0px;
}
Got it! The h1 was the problem. I added:
h1 {
margin-top: 0;
}
No-gap at the top of the page anymore!
You should add "margin: 0; padding: 0;" to the body tag
I ended up having to assign a border to get rid of the whitespace at the top.
<body><div style="border-top:solid black 1px;"><my-app>Loading...</my-app></div>
I found the problem in Site.css in the Content folder in my project.
body {
padding-top: 50px;
padding-bottom: 20px;
}
I simply commented-out the padding.
Can you try using reset css.there is a possiblity that the div or body can have some default padding or margin.