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
Related
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 have made a collapsed navbar on the outside clicking navbar element using bootstrap, and it worked
but when I megganti navbar element with input form, this is not the way I want
because when I would fill out the form navbar automatically collapse before I finished it
This is the code that I created: http://jsfiddle.net/acile/3cbje867/
HTML code:
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a 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>
</a>
<a class="navbar-brand" href="/">Application</a>
</div>
<div class="navbar-collapse collapse navbar-search">
<ul class="navbar-nav nav menu menu-main-menu">
<li>
<div class="input-group">
<input id="search-input" class="form-control" type="text" placeholder="Search" tabindex="1" autocomplete="off">
<div class="input-group-btn">
<button id="search-button" class="btn btn-primary" tabindex="2"><span class="glyphicon glyphicon-search"></span></button>
</div>
</input>
</div>
</li>
</ul>
</div>
</div>
javascript code:
$(document).click(function (event) {
var $navsearch = $(".navbar-search");
var _opened = $navsearch.hasClass("in");
if (_opened === true) {
$navsearch.collapse('hide');
}
});
help me please, how can i fix it ?
You need to determine whether you are clicking inside of the element or not.
Use $(e.target).closest($navsearch).length to check whether the click event occurs inside of $('.navbar-collapse.navbar-search').
Updated Example
$(document).on('click', function(e) {
var $navsearch = $('.navbar-collapse.navbar-search');
if(!$(e.target).closest($navsearch).length && $navsearch.is(':visible')) {
$navsearch.collapse('hide')
}
})
Bootstrap's navigation has already the collapsed functionality in-built so you don't have to re-write it. You could manually hide the search bit using some jQuery:
http://jsfiddle.net/1p8p0dnf/5/
$('#search-button').on('click', function() {
// Remove collapsed class
$('#search-nav').removeClass('in');
// Clear search input text
$('#search-input').val('');
});
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'.
I am using twitters bootstrap to create a responsive site. I have a dropdown with quite a few links, when i'm in mobile view instead of making the nav collapse area bigger it creates a scrolling effect. Is there a way to make to the dropdown force the collapse nav div to increase in size or push my content down?
Here is the code i'm currently using.
<div class="row">
<div class="col-md-12">
<nav id="menu1" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<div id="logo" class="pull-left hidden-md hidden-lg">
<div class="logo-small">
<img src="<?php bloginfo('template_directory');?>/images/logo-xs.png" alt="small-logo" class="img-responsive"/>
<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>
</div>
</div>
</div>
<?php wp_nav_menu( array( 'theme_location' => 'main-menu',
'depth' => 2,
'container_class' => 'collapse navbar-collapse',
'menu_class' => 'nav nav-pills nav-justified',
'walker' => new wp_bootstrap_navwalker() )); ?>
</nav>
</div>
</div>
Try adding the following to your css.
.navbar-collapse{
max-height:auto;
}
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");
}
});