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'.
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 use bootstrap navbar, and it collapses fine on small screens, shows the navbar-toggle and the dropdown menu if I click on the navbar-toggle. Standard behavior.
I want, however, to hide the entire navbar ribbon on small screens and just show a button on top middle part of the screen. When I click on this button, it should open the dropdown navbar. This is my html:
<div class="navbar-show">
<button type="button" class="navbar-toggle" onclick="document.getElementById('toggle-button').click();">
<img height="50px" width="50px" src="img/logo3.gif">
</button> </div>
<nav class="navbar navbar-default" data-ng-controller="GlobalAuthCtrl"> <div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" id="toggle-button" 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="http://gliderforecast.com"><img height="50px" width="48px" src="img/logo3.gif"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
My css:
#media (max-width: 767px) {
.navbar{
display:none;
}
.navbar-show {
display: block !important;
}
}
.navbar-show {
display: none;
position: fixed;
z-index: 10;
top: 0px;
left: 50%;
}
It shows the regular navbar on large screens, hides the navbar and shows the button on small screens, but I cannot get it show the collapsed navbar dropdown when I click on the button. Please guide me in the right direction. A completely different approach is also fine, just have the required functionality. JQuery is not preferred, (I am using angularJS) but can use it too.
You can delete the #toggle-button part. And try:
<div class="navbar-show">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<img height="50px" width="50px" src="img/logo3.gif">
</button>
</div>
Bootstrap links it's JS part through data- attributes here.
I want to add static (not movable) header to the off canvas push menu.
here is what I have for now: codePen link
<span>This text should not move</span>
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas">
<a class="navmenu-brand" href="#">Project name</a>
<ul class="nav navmenu-nav">
<li>Slide in</li>
<li class="active">Push</li>
<li>Reveal</li>
<li>Off canvas navbar</li>
</ul>
</div>
<div class="navbar navbar-default"> -------------------- navbar should not move -----------------------
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas=".container">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container">
<h1>Content that should move. Menu should slide from the left side UNDER the navbar</h1>
</div>
the problem is that I don't know how to force menu slide under the 'navbar'.
Any ideas?
You need to add top:120px to make it appear below the navbar
.navmenu-fixed-left, .navmenu-fixed-right, .navbar-offcanvas {
position: fixed;
z-index: 1050;
top: 120px;
bottom: 0;
overflow-y: auto;
border-radius: 0;
}
DEMO
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.
I tried to implement a vertical navigation with twitter bootstrap 3.0 that collapses automatically.
The basics work (window size small = menu at the top like it should be), but the problem is that it is not collapsed as it is if I use the default navbar features in bootstrap.
<div class="container-fluid">
<div class="row">
<div class="navbar-brand">
BABSI
</div>
<button type="button" class="btn navbar-btn" data-toggle="collapse"
data-target="#sidebar">TOOGLE
Toggle navigation
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row">
<header id="sidebar" class="col-md-2 collapse">
<div class="row">
<!-- generates ul structure -->
<nav:primary class="nav navbar-inverse nav-stacked" />
</div>
</header>
<section id="content" class="col-md-10">
<div class="row"></div>
<div class="panel panel-default">
<div class="panel-heading">
<g:layoutTitle />
</div>
<div class="panel-body">
<g:layoutBody />
</div>
</div>
</section>
</div>
</div>
You need the .navbar-collapse class in your nav since that's the one that is set up to collapse at the given breakpoint.
I made some changes in your markup to accommodate that and also added a .navbar container so you can easily use the .navbar-toggle class on the button:
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-brand">
BABSI
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar .navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row">
<header id="sidebar" class="col-md-2">
<div class="collapse navbar-collapse">
<!-- generates ul structure -->
<nav:primary class="nav navbar-inverse nav-stacked" />
</div>
</header>
<section id="content" class="col-md-10">
<div class="row"></div>
<div class="panel panel-default">
<div class="panel-heading">
<g:layoutTitle />
</div>
<div class="panel-body">
<g:layoutBody />
</div>
</div>
</section>
</div>
</div>
To remove unwanted styles and since you're not using the default navbar-collapse structure you need to add this to your CSS
//remove background and border from navbar
.navbar-default{
background: none;
border: 0;
}
.navbar-collapse{
padding: 0;
}
//override width:auto of navbar-collapse
#media (min-width:768px) {
.navbar-collapse {
width: 100%;
}
}
Here's a demo fiddle with the changes
Try this.
<script>
$('.navbar-collapse a').click(function(){
$(".navbar-collapse").collapse('hide');
});
</script>