I'm using bootstrap on WordPress using the _ib theme, and I would like to add in my own responsive menu for when window is less than 768px. By default bootstrap will convert the menu to a dropdown-toggle, which when clicked shows your original menu. What I would like to do is implement my own menu when it is used on a small device or at a low resolution.
How would I remove this dropdown-toggle? I have looked around the bootstrap JS files, but I'm no JS whizz, so I can't quite figure out how to simply scrap the dropdown-toggle.
Any help appreciated!
EDIT:
<div class="container">
<div class="row">
<div class="site-navigation-inner col-sm-12">
<div class="navbar navbar-default">
<div class="navbar-header">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Go to...</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse navbar-responsive-collapse',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'walker' => new wp_bootstrap_navwalker()
)
); ?>
</div><!-- .navbar -->
</div>
</div>
</div><!-- .container -->
I tried the simple method of just removing this .navbar-toggle as I don't need it, but that actually removes the entire menu even on a full page window...
When you look at you index php page. You will see your navigation divs.
To turn off the behavior you can remove the toggle class.
<div class = container>
Etc
One of the classes will be a toggle class. Simply remove it.
What version is it? 2 or 3.
You can just replace the code with yours. I'm familiar with joomla with is basically html surrounding php.
If your looking to modify the css you will need to override it. How you do this easily will depend on wether your template uses CSS LESS or a custom.css file. You could even remove the navigation diva and replace with your own code utilizing bootstrap layout classes.
Giving the version of bootstrap will help with this question.
Bootstrap uses media queries you need to find what query you are targeting. Bootstrap website is very informative on this
http://getbootstrap.com/getting-started/
There are examples of layouts here. Make sure your nav divs and classes are the same. It will work.
Please back up or comment out old code for reuse.
When I get to my PC il look at code if not fixed by then.
You cofusing me slightly here. You have a menu (bootstrap) one and you have a plugin that is also calling a menu?
Or
Do you have two menus on the same page? Or does your plugin rely on the the current menu?
Im confused what you want here. It looks like you have a menu as part of the template and then you are calling a module to create a menu in the form of a plugin. It will not work if this is the case.
The plugin menu may conflict with the existing menu. If you have your own existing menu why dont you just remove the entire template menu and then just let your plugin be called?
If I am way of the mark I apologize. However if a plugin is involved the code is an unknown!
Is the plugin an addon to the template? If not you may have a conflict
Think you may need to contact the developer of the plugin
Related
I have the following code attempting to toggle a class on the body element:
$(document).on("turbolinks:load", function() {
// Minimalize menu
$(document).on('click', '.navbar-minimalize', function (event) {
$('body').toggleClass('mini-navbar');
})
...
It works on a fresh page load every time, but fails EVERY OTHER link navigation thereafter. Fresh page load (class toggle works), 1st link click (broken), 2nd link click (works), etc.
Note that I was using jQuery originally when I spotted the bug, then moved to vanilla JS to see if it was a jQuery issue. Needless to say, it wasn't.
I removed a bunch of other dependencies one by one and the only thing that resolves the issue is by removing Turbolinks and replacing turbolinks:load event with jQuery's document.ready.
When analyzing with Chrome Dev tools, it shows that the classlist is trying to be manipulated (highlights it yellow temporarily), but ultimately nothing changes.
I know this is very strange and probably unique to my codebase. I just can't figure the damn bug out.
-- UPDATE 1 --
Here is the relevant HTML markup. Note the 'a' tag class of 'navbar-minimalize' is the trigger. The body tag is the element which the js is trying to toggle the class.
<!-- topnavbar.html.erb -->
<div class="row border-bottom" id="vue-autocomplete-app">
<nav class="white-bg navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary" href="#"><i class="fa fa-bars"></i> </a>
<form role="search" class="form form-inline navbar-form-custom" method="" action="">
<global-search></global-search>
</form>
</div>
</nav>
</div>
Then the rails templating code that loads the above template:
<!-- application.html.erb -->
<body class="fixed-sidebar">
<!-- Wrapper-->
<div id="wrapper">
<!-- Navigation -->
<%= render 'layouts/navigation' %>
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Page wrapper -->
<%= render 'layouts/topnavbar' %>
...
-- UPDATE 2 --
If I move the toggle code outside of the turbolinks:load into a document ready, everything seems to work fine. With that said, it seems to be some sort of quirky behavior with turbolinks.
--
Any help? What's the issue here?
I've got an accordion menu using Bootstrap's Collapse functionality, and I tried to style it based on the CSS classes Bootstrap uses to show and hide the collapsible element.
My problem is that when the document is fully loaded, the collapsed class is not loaded on the collapsed elements, while they appear collapsed. So my page renders with it's 'open' styling, while every collapsible element is collapsed like it should be. After the first couple of clicks, the collapsed class is present and the styling works as it should.
Forcing the collapsed class onto each element post DOM load for one is a messy way to solve the problem, but the styling still shows up for a second before changing.
To illustrate, this should be happening:
Collapsed State
Uncollapsed State
But instead, on load, I'm getting this as the collapsed classes simply aren't present:
Any ideas what can be done about this?
Edit: Code Inclusion (ignore the Razor snippets)
<button class="category-select" data-toggle="collapse" data-target="#collapsible-#i">#fieldset.GetValue("title")</button>
<div id="collapsible-#i" class="collapse">
<div class="category-inner">
#Html.Raw(#fieldset.GetValue("innerText"))
</div>
</div>
Just realised what I did wrong based on the styles that are present. What I should have done is added the collapsed class to the html myself.
The code should in fact look like this:
<button class="category-select collapsed" data-toggle="collapse" data-target="#collapsible-#i">#fieldset.GetValue("title")</button>
<div id="collapsible-#i" class="collapse">
<div class="category-inner">
#Html.Raw(#fieldset.GetValue("innerText"))
</div>
</div>
Correct styles are then applied on load, ready for collapsed to be removed on click.
Very silly mistake.
That's it, by default, liferay main navigation is being collapsed to dockbar, wich is hidden for not admin users in my solution. I tryed hooking the dockbar and deleting the collapse icon, but site-navigation keeps hiding on window resize.
Any ideas please?
P.D: I saw this post:
- Move collapsed menu button from the dockbar
Where the problem is solved, but as I mention there, I think it's not a "stylish" way of solving this problem and it's could give me more problems.
Thanks for reading.
On the fly i could tell you how to solve it the toggle button in case of no dockbar presence.
On your custom theme based on classic one you have to customize navigation.vm and insert the code to have the hamburger icon close to the navigation.
(The code is not tested)
<nav class="$nav_css_class navbar site-navigation" id="navigation" role="navigation">
<div class="navbar-inner">
#* start toogle hamburger menu *#
<a class="visible-phone brand btn" data-toggle="collapse" data-target="#navigation">
<i class="icon-reorder"></i>
#language ("main-menu")
</a>
#* end *#
<div class="collapse nav-collapse">
<ul aria-label="#language ("site-pages")" class="nav nav-collapse" role="menubar">
#foreach ($nav_item in $nav_items)
#set ($nav_item_attr_selected="")
#set ($nav_item_attr_has_popup="")
#set ($nav_item_caret="")
#set ($nav_item_css_class="lfr-nav-item")
#set ($nav_item_link_css_class="")
#*continue...*#
I know this has been discussed in other threads, but I've very new to coding websites in general, and when I try to use the solutions others have come up with, they just don't seem to work. And I apologize if my terminology isn't quite right, but hopefully you'll be able to understand!
On the site I'm building on my localhost, I have it so that the Bootstrap navbar I'm using remains collapsed on desktop, tablet, and mobile. The navbar is a sticky nav, and when you select an item from the menu it scrolls down to the item's anchor. The problem is, since the menu remains open when an item is clicked, the dropdown covers part of the div it anchors to.
This is the code for my navbar:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-brand">
<h2>My Title</h2>
</div>
<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>
</div>
<?php
wp_nav_menu( array(
'menu' => 'menu-1',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</nav>
I've seen solutions like this:
$('.nav-collapse').click('li', function() {
$('.nav-collapse').collapse('hide');
});
But when I try adding it to my code it doesn't work. I've been putting it in my head, but I'm not sure if that's where I should be inserting it. Should I be putting that in the bootstrap.js file, or should I be downloading another javascript library?
Try to be very descriptive with your answer if you can, because to reiterate, I'm very new to this and I'm still in the process of learning.
Thanks so much,
Angela
you should add on the very bottom of your page a javascript part (right before )
Frm the code you paste, I assume that you have already loaded jQuery library too ($. is equivalent to jQuery.)
The code bellow adds an event on the ID element bs-example-navbar-collapse-1 with jQuery
<script src="http://code.jquery.com/jquery-1.11.1.min.js type="text/javascript"></script>
<script>
$("#bs-example-navbar-collapse-1").click('li', function() {
var element = document.getElementById("#bs-example-navbar-collapse-1");
if (element.className == ".navbar-toggle"){
$(".navbar-toggle").collapse('hide');
}else
console.log("Navbar has to be opened");
});
</script>
</body>
Have you tried using the Scroll-nav Bootstrap theme?
https://startbootstrap.com/template-overviews/scrolling-nav/
The nav sticks to the top and when you navigate down the site, the divs don't get hidden.
These "accordion submenus" work in chrome and firefox, but not on an iphone.
I have built a site which includes an "offcanvas" navigation menu on smaller screens. The user clicks "the hot dog button", and the navigation menu slides onto the screen from the left... that works great so far.
Some of the navigation elements contain submenus. For those, I used bootstrap's accordion markup. The user clicks an arrow, and the "submenu" expands.
The Problem
I develop using chrome on linux. This mechanism works perfectly in chrome, firefox, and every browser I can get my hands on, as well as on my personal android phone. It also works on responsinator.com. However, since I don't have Safari, nor an iPhone, I have not been able to test this functionality directly on an iphone. I am working on getting an iPhone emulator...
Until then, some other people have looked at this on an iPhone, and I am told the "submenus" do not work at all. When the user clicks the arrow, nothing happens...
Here is an excerpt of a "menu item" containing a "sub-menu": please note I am using the 'data-toggle' and 'data-target' attributes:
<div class="panel panel-default">
<!-- The "Trigger" -->
<div class="panel-heading">
<h4 class="panel-title">
<a href="view.php?cms_nav_id=1" name="about">
About</a>
<a data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>
</h4>
</div>
<!-- Populated submenus: -->
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
Ohio Improvement Process
</div>
<div class="panel-body">
Organization Beliefs
</div>
</div>
</div><!-- /.panel -->
I really don't know what to try next: Similar questions have ended with "a css conflict" or iphone problems regarding .click(), but I am not using that: I am using data-toggle/data-target. I am considering abandoning the 'data-target' markup in favor of manually invoking an on('click', ... ) event, but I would rather not...
By the way, I call this at the bottom of my page if that's relevant:
<script src="/assets/dist/js/bootstrap.min.js"></script>
Which is 'bootstrap.js v3.0.0' .
Does anyone have any other clues? Any recent direct experience with an issue like this?
Thanks in advance for your help.
So I think I figured this out: my original markup relied solely on the data-target element, but that is apparently not enough. Safari (on iPhone) seems to also need the href attribute (which really should be there on an <a> anyway. So this works:
<a data-toggle="collapse" data-target="#collapse1" href="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>
But this does not:
<a data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>
For me, collapse would work on desktop and iphone, but some of my collapses were not working on ipads. It turned out that perfect solution for me was given by #Loris in #Ryan's answer, to add the pointer style to any collapsable trigger (e.g., a div acting as a button). I generalized this to the following CSS:
[data-toggle~="collapse"] {
cursor: pointer;
}
looking at this, I had the same problem, however, when you add a href="#collapse1", it jumps you to the top of the page. I fixed this by wrapping the element in a button and removed the css for buttons. So, your code would be:
<button data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</button>
Hope this helps.
You can fix this by simply adding this attribute to the div that triggers the dropdown.
cursor: pointer;
This is working for me :
$('.divClassName').on('click touchstart', function () {
$($(this).data('target')).collapse('toggle');
});
To make this work for any element type, such as a div, you can use the following jQuery method (tested ios 8):
<div class="collapse-header" data-target="#collapse_0">
Click this element...
</div>
<div id="collapse_0">
...to collapse this element.
</div>
<script>
$('.collapse-header').on('click', function () {
$($(this).data('target')).collapse('toggle');
});
</script>
for further reference:
I did this in my application:
a[data-toggle="collapse"]{
cursor:pointer;
}
And it fixed the problem.
In the MDN documentation says this:
"Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g. ) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). See this live example for a demonstration. See also Safari's docs on making elements clickable and the definition of 'clickable element'"
References:
https://github.com/twbs/bootstrap/issues/16213
https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
Enabling the animation will cause some problems in IOS devices. Disable it and it will work. That was the case for me.
[isAnimated]="false"