I have a website at: https://www.romaheritage.co.uk
The issue is the Bootstrap menu at the top of the page; it works fine on desktop PCs/Laptops, but when viewed on mobile devices (phones/tablets) the two drop-down menu options "Records" & "Misc" won't expand out (at least on Android they won't, not sure about IOS because I can't test it). I think I'm overlooking something which may be obvious to others.
Can anyone view the source for the page and point me in the direction of what I've done wrong?
I made it work by replacing the a.dropdown-toggle by a div.dropdown-toggle.
The css is not good then but I believe you can make this right.
Here's the code
<div class="collapse navbar-collapse" id="tb-nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#about">About</a></li>
<li class="dropdown">
<!-- Change a to div -->
<div class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Records <span class="caret"></span></div>
<ul class="dropdown-menu">
<li>BMD</li>
<li>Census</li>
</ul>
</li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/newspaper-articles">Newspapers</a></li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#blog">Blog</a></li>
<li class="dropdown">
<!-- Change a to div -->
<div class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Misc. <span class="caret"></span></div>
<ul class="dropdown-menu">
<li>Queen Victorias Journals</li>
</ul>
</li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#contact">Contact</a></li>
</ul>
</div>
try this one...
$("li.dropdown").click(function(e){
$(this).toggleClass("open");
});
Related
First time here. I am having trouble with my Bootstrap 5.1 Navbar menu. Some background: I am hosting my website locally via Xampp and my pages are php to allow for forms and cookies. Everything works great on the desktop. I have tested the responsiveness of my site in DevTools on different sized devices and the dropdown menu (the collapsed navigation menu) works perfectly on those. I then tried the dropdown menu on my S21 Ultra and Tab S6 using the locally hosted server. While the hamburger toggler will appear, it will not drop down the menu. I tried removing the button icon so that I could see if the button is toggling and it is, but it doesn't seem to be actually changing any of the values of the navbar as it does on the desktop or in the DevTools. I have tried everything. My code is up-to-date and the js and css for Bootstrap are placed in the correct locations. Please help.
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
</ul>
</div>
</nav>
Again, it works fine on desktop and in mobile view using DevTools on Chrome. Any changes (CSS-wise) are only to color and size so they should not interfere. All other buttons on the webpage work. I am really unsure how to move forward.
All I need is for the drop-down menu to open when using a mobile device.
Remove the -bs- from data-bs-target and data-bs-toggle like below.
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
</ul>
</div>
</nav>
I'm looking to expand and collapse the desktop version of the Bootstrap 4 navigation with a simple toggle button.
So example would be a menu button to click and will minimise menu items into the left side of the screen.
[Menu]
[Menu] Link Link Link Link Link
Bootstrap defaults however don't provide desired result.
<nav class="navbar navbar-expand-md navbar-light bg-light main-nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100">
<ul class="nav navbar-nav w-100">
<li class="nav-item active nav-breaker">
<a class="nav-link" href="#">Menu</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Haircare</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item nav-breaker">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book Appointment</a>
</li>
</ul>
</div>
<a class="navbar-brand order-first order-md-0 mx-0" href="#">Shear Success</a>
<div class="collapse navbar-collapse w-100">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>
</nav>
The short answer is that changing bootstrap's default navbar animations is not easy.However, I got you most of the way there: https://www.codeply.com/go/1VhJAMNHEO
your markup is not boostrap-compliant. fix your html so that you follow boostrap standards outlined here. See the section labeled "With a toggler on the left... "
remove the navbar-expand-md class from the nav to make the menu collapsed by default
override bootstrap's default styling to achieve the desired "slide in from the left" effect. this is much easier said than done. in particular the navbar adds a temporary class .collapsing that is easy to miss.
this is going to mess up responsive styling and will require more attention i.e. media queries.
honestly, if you want the navbar to do anything besides what's listed out on the documentation, I've found it easier to write most of my own styling and scripting from scratch, leveraging only the basic .navbar and .navbar-nav etc classes for styling
I've seen several posts similar to this, but none of the solutions worked. I have a drop-down menu on my navigation. The nav looks like this
<ul>
<li role="presentation" class="dropdown">
Insurance <span class="caret"></span>
<ul class="dropdown-menu">
<li>Insurance</li>
<li>Home</li>
<li>Boat</li>
<li>Health</li>
</ul>
</li>
<li class="navdivider"></li>
<li role="presentation">
Customer Service
</li>
<li class="navdivider"></li>
<li role="presentation">
Claims
</li>
</ul>
When I click on the drop-down menu it shows up fine. When I click out of it or click the 'Insurance' link on the navigation the option on the navigation disappears. I get
<li role="presentation" class="dropdown" style="display: none;">
<a href="insurance.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
I've seen this same error posted elsewhere and I'm aware that it is a conflict with jquery & bootstrap, but I can't seem to fix it using the suggested fixes. I am not trained in javascript, so I'm unsure if I implemented incorrectly. Thank you.
I have a responsive dropdown on my webpage. Works as intended on desktop/laptop browsers. However, when you use a phone or ipad with a smaller screen, the nav gets hidden after I click a link that should present another dropdown menu.
Here's the js function. -
$('.navbar-collapse a').click(function(){
$(".navbar-collapse").collapse('hide');
});
and the html -
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<img src="images/Logo-banner.jpg" height="auto" width="auto" />
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>Home</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Computer, Tablet & Phone Services</li>
<li>On Site Services</li>
<li>Remote Services</li>
<li>Managed Services</li>
<li>Data Backup Services</li>
<li>Surveillance Systems</li>
<li>New & Used Computer Sales</li>
<li>Custom Built Computers</li>
<li>VOIP Phones</li>
<li>Web Design & Hosting</li>
</ul>
</li>
<li>Shop Online</li>
<!--<li>About</li>-->
<li>Download</li>
<!--<li>Contact</li>-->
<li>Contact</li>
</ul>
</div>
</div>
</nav>
What I'm thinking I have to do is create a conditional in the js that will not execute the hide function if it is of a certain class. I really don't have much experience with js though. Here's what I tried.
$('.navbar-collapse a').click(function(){
if(!$(this).hasClass("ddown")) {
$(".navbar-collapse").collapse('hide');}
});
Any tips? Suggestions? Solutions? Anybody see this before?
For anyone having the same problem with bootstrap responsive dropdowns auto-closing after being clicked inside parent nav-menu here is the solution.
Add a class to the link you would click on that would drop down the menu, name it whatever you want (i named mine "ddown):
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>Home</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Computer, Tablet & Phone Services</li>
<li>On Site Services</li>
<li>Remote Services</li>
<li>Managed Services</li>
<li>Data Backup Services</li>
<li>Surveillance Systems</li>
<li>New & Used Computer Sales</li>
<li>Custom Built Computers</li>
<li>VOIP Phones</li>
<li>Web Design & Hosting</li>
</ul>
</li>
<li>Shop Online</li>
Then add this if to your navbar function in your javascript:
$('.navbar-collapse a').click(function(){
if($(this).hasClass("ddown")) {
event.preventDefault();}
else {
$(".navbar-collapse").collapse('hide');
}
});
That's it, Good luck.
I am trying to replicate the "tabs" section as explained in this tutorial: Google material Design. Everthing works fine except when I insert a date which uses a datepicker widget from this url: Datepicker. As soon as I select the date all the tabs in Megamenu become unresponsive
HTML code for the tabs:
<ul class="nav nav-tabs" style="margin-bottom: 15px;">
<li class="active">Home</li>
<li>Reminder</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="bootstrap-elements.html" data-target="#">
Reports <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Insurance History Between Dates</li>
<li class="divider"></li>
<li>Insurance history of Account</li>
<li class="divider"></li>
<li>Insurance Amount between dates</li>
</ul>
</li>
<li>Bulletin Board</li>
<p class="user" data-toggle="tab">Welcome Wasim(1117004017)</p>
</ul>
Script for datepicker:
$("#dtBox").DateTimePicker();
This renders Megamenu like this:
One more strange thing I came across is that as soon as tabs become unresponsive and I click on "Reports" tab I get this:
It was the fault of the DatePicker plugin. This line of code
$(document).unbind('click')
stopped bootstrap's propagation of the menu.