• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Navbar dropdown hover

Contributor ,
Nov 15, 2020 Nov 15, 2020

Copy link to clipboard

Copied

Hello.  Is it advisable to make a bootstrap 4 dropdown on the navbar hover?  I have read that it should only be used for the largest screen size.  Any thoughts?

 

Does anyone know of an active forum to ask questions about Bootstrap 4 on the web?

 

Thanks.

 

Views

489

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Nov 15, 2020 Nov 15, 2020

Bootstrap is a mobile-first framework. 

 

My analytics tell me the majority of site traffic is coming from touch screens  -- mobile, tablets, laptop/tablet hybrids, surface pros, etc... so that's who I cater to.  Hover menus of the past don't add anything and are for the most part  obsolete now.  I rarely if ever see them anymore.

 

Votes

Translate

Translate
LEGEND ,
Nov 15, 2020 Nov 15, 2020

Copy link to clipboard

Copied

No reason why you cant have a 'hover' effect for desktop devices. Hover wont work on mobile devices though so you need to keep the default onclick event.

 

If you want to implement the drop down on hover and you are using Bootstrap 4 then you need to write a bit of extra javascript. Below is just something I put together which will do the job (assuming youre using the default Bootstrap 4 html structure). Someone who actually uses Bootstrap (I personally don't) may have a better more streamlined solution. I have no doubt there are few ways you can do this.

 

The below script needs to be located at the bottom of your page just before the closing </body> tag.

 

 

 

 

 <script>
// get all the dropdown-toggle anchor links and assign them to a variable - dropdownToggle
const dropdownToggle = document.querySelectorAll('.dropdown-toggle');
// get all the dropdown-menu divs and assign them to a variable - dropdownMenu
const dropdownMenu = document.querySelectorAll('.dropdown-menu');
// loop through each dropdown-toggle anchor and display the next dropdown-menu div whilst adding display none to the others
dropdownToggle.forEach(function(dropdown) {
dropdown.onmouseover = function() {
dropdownMenu.forEach(function(dropdownMenu) {
dropdownMenu.style.display = "none";	
})
this.nextElementSibling.style.display = "block";
}
});
// loop though all the dropdown-menu divs and apply an onmouseleave event to hide the current active div
dropdownMenu.forEach(function(dropdownMenu) {
dropdownMenu.onmouseleave = function() {
this.style.display = "none";
}
})
</script>

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 15, 2020 Nov 15, 2020

Copy link to clipboard

Copied

Bootstrap is a mobile-first framework. 

 

My analytics tell me the majority of site traffic is coming from touch screens  -- mobile, tablets, laptop/tablet hybrids, surface pros, etc... so that's who I cater to.  Hover menus of the past don't add anything and are for the most part  obsolete now.  I rarely if ever see them anymore.

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 15, 2020 Nov 15, 2020

Copy link to clipboard

Copied

Hover menus of the past don't add anything and are for the most part obsolete now. I rarely if ever see them anymore.

 

I would agree with that statement, however it won't do any harm to throw in a hover effect for desktop device if one can be bothered just as long as you don't rely on it for mobile devices. Can I personally be bothered, no. Is it really needed, no - unless you're paranoid about the end user having to do that extra click.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 15, 2020 Nov 15, 2020

Copy link to clipboard

Copied

This is what I was thinking because it will only work on a desktop.  

 

Thanks to all of you!

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 15, 2020 Nov 15, 2020

Copy link to clipboard

Copied

If this is what the dropdown looks like

 

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu" aria-labelledby="dropdown01">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</li>

 

  Then add the following to the style rules

 

.dropdown:hover>.dropdown-menu {
    display: block;
}

 

PS: Have I ever told you that I have an adversity to hover events?

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 15, 2020 Nov 15, 2020

Copy link to clipboard

Copied

Have I ever told you that I have an adversity to hover events?

 

Why is that Ben? We always used to deploy hover events back in the day. Nothing much has changed for desktop, they can still bring some subtle eye-candy on those devices, no?

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 15, 2020 Nov 15, 2020

Copy link to clipboard

Copied

Sorry for the late reply, had a busy day.

 

I have come across websites that, no matter where the curser is, something pops up or changes colour. I want to be in command when I visit a website. Clicking or tapping is a conscious action.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 16, 2020 Nov 16, 2020

Copy link to clipboard

Copied

LATEST

I have come across websites that, no matter where the curser is, something pops up or changes colour.

 

Well I agree, that is just irritating and I have said that in the past where 'developers' over deploy events, whether that be hover/animation on scroll, etc. That is just bad practice but some subtle hover/scroll event usages I think is acceptable.  It's just about knowing when to use them and when not to and certainly not using them just because they are available.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines