I have developed a site using wordpress and bootstrap 3 framework. My issue is when its uses the mobile collapse menu it doesn't display after I click the icon.
Been trying to debug a while now but no luck yet.
Site is question is
http://www.reillyscott.com.au/
thanks in advance
<div class="collapse navbar-collapse navbar-responsive-collapse">
Find this div and remove "collapse" class. Its not needed and its causing the issue.
Edit: Actually that div is not need it at all. You can move its innerHtml out of it and delete it.
It's because your JS is not changing the state of the menu to display block, maintaining the display:none;
The menu is being hidden in the bootstrap.css, line 3045.
You should be toggling the menu when a certain resolution comes, making one display:none and the other display:block.
To implement Bootstrap menus in Wordpress, I recommend you to use WP Bootstrap Nav Walker.
Took me a while to figure out your problem. Instead of going into too much detail, I'll just tell you what to delete, and it will work!
<div id="bs-example-navbar-collapse-1" class="navbar-collapse collapse in" style="height: auto;">
<!--
The WordPress Menu goes here
-->
<div class="collapse navbar-collapse navbar-responsive-collapse"> **<--- DELETE THIS DIV**
<ul id="main-menu" class="nav navbar-nav navbar-right"></ul>
You already have a navbar-collapse in your first div. You're using it twice and throwing off the JavaScript. Only delete the opening and closing div. Keep your wordpress menu php code there.
Message me if you have further questions.
Cheers,
Related
I'm using reactstrap and have been following this link:
https://reactstrap.github.io/components/navbar/
In the example, the <nav className='ml-auto' navbar> is pushing the <NavItem> to the right. However, what I am trying to implement (which is really similar to the example) the <NavItem> is rendering right next to the <NavbarBrand>.
I've checked the syntax like 100 times and it looks correct. The custom CSS I have, which is very little, does not seem to be overriding anything. The CSS in the console looks pretty similar and it appears to be affected by the:
.ml-auto, .mx-auto {
margin-left: auto!important;
}
At least toggling it off in the console in the example, moves the <NavItem> right next to the <NavbarBrand> like it is in my app (which I don't want). Here is what I am looking at:
Reactstrap Example (correct spacing):
Console for my app (incorrect spacing):
How do I get the spacing right in my app?
It really isn't clear to me what is affecting margin-left: auto !important to work in one and not the other.
For Bootstrap-5 we have to use ms-auto instead of ml-auto
Starting from Bootstrap 5 2021, There are some changes in the side names of spacing utilities.
Margin Left is now called Margin Start, therefore use ms instead of ml
Example: For setting margin-left to auto : use ms-auto
Similarly for setting margin left to 3 : use ms-3 instead of ml-3
You can learn more about the new side names for margins and paddings in the official bootstrap documentation BootStrap Spacing Utilities
The navbar components (and many other components) will only work if you use them the way they've been designed to be used.
For example, ml-auto works on sibling elements.
It does NOT work if you destroy that sibling relationship.
In other words, you cannot just randomly wrap elements in unnecessary divs.
Remove the div you put around the navbar-toggler and the collapse component to make the sibling selector work as intended.
Also: Do NOT use the !important flag as a permanent solution in any of your custom css. That flag is for quick testing only.
P.S. You seem to have a habit of wrapping things in unnecessary divs. The container is also wrapped in such a useless div. Don't add unnecessary code for some sort of "esthetics". Only add code if it actually does something and use comments for everything else.
Explanation on how ml-auto works.
It appears this was already resolved in the comments. I just wanted to add an explanation that ml-auto was not working because it's flexbox parent needs to be full-width of the navbar. So, it could have also been solved by adding w-100 to the extra div..
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a class="navbar-brand" href="#">reactstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="w-100">
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
...
</ul>
</div>
</div>
</nav>
ml-auto works because of the way the flexbox parent "shrinks" the child block element(s) by default. It has nothing to do with sibling elements, and would work fine with just one child in the flexbox parent: https://www.codeply.com/go/xPaoNJMzbG
Here's a good article on how auto-margins work with flexbox
In Bootstrap-5 there are some changes, earlier it was ml-auto for margin-left:auto which is now changed to ms-auto, similarly mr-auto is changed to me-auto. However for top and bottom it is same as earlier versions of bootstrap i.e versions before bootstrap-5
for more details visit docs
I am using bootstrap#5.0.X
If you are stuck with this problem in 2021,
It is because there has been migration and changes in the class name.
.ml-* and .mr-* to .ms-* and .me-*.
similarly many others class name has been changed.
Link to check migration
Bootstrap Migration link
My navbar is currently closed as default (navbar only shows on mobile).
Is there some css that will default the nav bar to open?
I currently have no code as I'm trying to edit a template. I believe it's a bootstrap navbar.
Site: yodega.com (on mobile, or small screen)
Thanks!
It is not supported by default:
https://github.com/twbs/bootstrap/issues/3944
There is simple and fast but not clean solution:
You can simulate clicking on navbar element after page rendering:
document.querySelector('button.navbar-toggle').click()
Method click is described in link:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
There is also better solution but it require to change your source code.
When your page is rendered you can find something like this:
<div class="navbar-collapse navbar-top-collapse collapse" style="height: 0px;">
You can simply change it on this:
<div class="navbar-collapse navbar-top-collapse in" style="height: auto;">
Probably style="height: 0px;" is added by your library, and you should overwrite this behavior.
I am using bootstrap to build my site and the main navigation uses dropdowns for second level choices.
In IE10 only (works everywhere else), the dropdown menu is inconsistently accessible and if you are able to access the second level choices, they disappear after hovering off of them. In other words as you hover down the list of menu items, the one above will disappear when you hover onto the menu item below it. Perhaps there are two problems: one being you can't access the dropdown (maybe a padding issue?) but the disappearing problem, I have never seen before.
Here's my fiddle with the problem
(**When viewing the fiddle make sure to adjust the width of the Result panel otherwise it will be collapsed for mobile)
My html is pretty simple:
<div class="container">
<div class="row">
<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-collapse collapse"><!--NAVIGATION-->
<ul class='nav navbar-nav'>
<li class='first'>Getting Around
<ul>
<li>Find Your Ride</li>
<li>Transit Overview</li>
<li>Carpool/Vanpool</li>
<li>Biking & Walking</li>
</ul>
</li>
<li>Travel Training
<ul>
<li>Do It Yourself</li>
<li>Transit Orientation</li>
<li>Transit Ambassadors</li>
<li>Schedule a Training</li>
</ul>
</li>
<li>Senior Safe Driving</li>
<li>Programs & Services
<ul>
<li>Mobility Programs & Services Locator</li>
<li>Mobility Programs Overview</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Thank you in advance! I am stumped.
A variety of issues at work here, but I seem to have solved it. IE10 doesn't play well with display:none and once I replaced with visability: hidden on my navbar>li>ul, things seemed much better.
Also, can't confirm but since bootstrap adds a background color of transparent to its a tags, I think the background color of the list items we're going transparent. Adding a background color, adjusting the line-height seem to fix.
link to fiddle in original now works correctly in IE10.
Is it possible to set the navbar collapse breakpoint for a particular navbar in Bootstrap 3? I have a sub-navbar on my site that looks great down to 500px, and I'd rather not settle for a btn-group.
What I have right now: I've set up an ID for my navbar, and I'd like to use #toolbar .navbar{ to target that ID. Is there anything in Bootstrap that would allow me to target this selectively?
<div class="navbar navbar-default" id = "toolbar">
<ul class="nav navbar-nav">
<li> Back</li>
<li> Add</li>
<li> Delete</li>
</ul>
</div>
From the Bootstrap docs:
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
In order to create your own media query, you'll need to look at the LESS here and create your own rules for #toolbar.
My bootstrap subnav does not look the same as the one on the demo site. Here's my markup:
<div class="subnav">
<ul class="nav nav-pills">
<li>Modal</li>
<li>Tabs</li>
<li>Accordion</li>
<li>Other</li>
</ul>
</div>
and an image of what I am seeing:
and here is what I am trying to replicate:
I tried copying the markup exactly, but to no avail. I wondered if maybe it had something to do with the parent elements being different.. so I moved mine into a "container-fluid" classed div, but that didn't help. Maybe someone here can spot something my eye missed..
This is because the style is not included in bootstrap. You can grab the docs.css from their markup and reference that. That seems to be the CSS that is giving the sub-nav the styling you are looking for.
i.e.