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;
}
Related
I have a nav bar that contains another page of my site, the page listed in the nav bar has a drop down list that is going to be linked to an accordion on the specific page. I'm having trouble implementing it, that if one of the drop down list items is click, then you will be taken to the page and the particular accordion linked to the item will be open.
For testing purposes I only have the nav bar list item "Monitoring" accordion linked right now; when I click "Monitoring" it takes me to the right page, but the accordion is still closed.
Here's my nav bar:
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #6F9824; text-align:center ">
<div class="navbar-header" align="center">
<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" style="color:white;" align="center"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="color:white;" align="center">
<li>
<a asp-page="/Index" style="color:white;">Home</a>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:white;">
Centrify
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Centrify Home</li>
<li>Monitoring</li>
<li>Patching</li>
<li>Onboarding</li>
<li>Disaster Recovery</li>
<li>Reporting</li>
</ul>
</li>
</div>
</nav>
Accordion I'm trying to open:
<div id="Accordion1" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="2">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Vault Status
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="2">
<div class="card-block">
<div class="form-group">
<label for="exampleFormControlSelect2">Select Environment</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>RTP</option>
<option>OMA</option>
<option>BGI</option>
<option>BG2</option>
<option>CLD</option>
<option>WRKSTN</option>
<option>QA</option>
</select><br />
<button>Submit</button>
</div>
</div>
</div>
</div>
JavaScript:
$(function() {
$("#Accordion1").accordion();
});
function getParam(name) {
var query = location.search.substring(1);
if (query.length) {
var parts = query.split('&');
for (var i = 0; i < parts.length; i++) {
var pos = parts[i].indexOf('=');
if (parts[i].substring(0, pos) == name) {
return parts[i].substring(pos + 1);
}
}
}
return 0;
}
$(function() {
var defaultPanel = parseInt(getParam('panel'));
$("#Accordion1").accordion({
active: defaultPanel
});
});
I don't know if that's what's causing the problem, but the end of you'r <ul> and first <li> is missing on you'r first HTML code
How do you expect your accordion to work if there are no headers? According to jQuery UI documentation, your HTML should look something like
<div id="accordion">
<h3>First header</h3>
<div>First content panel</div>
<h3>Second header</h3>
<div>Second content panel</div>
</div>
but it does not. You need pairs header-content in order for it to work.
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
Can't get my bottom div to show.
tried all the suggestions in SO from this year. Added a variable to $scope, tried $scope.apply(); , etc.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="navController">
<div class="navbar-header" >
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse" ng-click="navCollapse()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/#!/">Exampe</a>
</div>
<div class="cart-summary">
<a href="/#!/cart">
<image src="/example/source" />
<div class="cart-info">
<div class="item-count"><p>{{ ngCart.getTotalItems() }} <ng-pluralize count="ngCart.getTotalItems()" when="{1: 'item', 'other':'items'}"></ng-pluralize><p></div>
<div class="total-cost"><p>{{ ngCart.totalCost() | currency }}<p></div>
</div>
</a>
</div>
</nav>
<div ng-show="vm.open" class="half-menu" id="side-menu" >
<ul>
<li><button>Cart</button></li>
</ul>
</div>
In my navController:
console.log('navController up!');
$scope.vm = { open: false};
$scope.navCollapse = function(){
console.log('before click', $scope.vm.open);
$scope.vm.open = !$scope.vm.open;
// $scope.vm.open = ($scope.vm.open == false) ? true : false;
console.log('after click', $scope.vm.open);
//open up menu
};
I know the controller is loaded because the console log shows up.
You div seems to be outside of controller's scope. try wrapping whole thing in another div like this:
<div ng-controller="navController">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<div class="navbar-header" >
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-collapse" ng-click="navCollapse()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/#!/">Exampe</a>
</div>
<div class="cart-summary">
<a href="/#!/cart">
<image src="/example/source" />
<div class="cart-info">
<div class="item-count"><p>{{ ngCart.getTotalItems() }} <ng-pluralize count="ngCart.getTotalItems()" when="{1: 'item', 'other':'items'}"></ng-pluralize><p></div>
<div class="total-cost"><p>{{ ngCart.totalCost() | currency }}<p></div>
</div>
</a>
</div>
</nav>
<div ng-show="vm.open" class="half-menu" id="side-menu" >
<ul>
<li><button>Cart</button></li>
</ul>
</div>
</div>
Ofc, sometimes placing navigation menu and components, that are controlled by the menu into a single wrapper is not an option. In this case you may use services and $broadcast/$emit to communicate the changes.
https://plnkr.co/edit/xwQkUYrDu9WL9dC46MOY?p=preview
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");
}
});
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>