Highlighted

Navbar dropdown hover

Explorer ,
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.

 

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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.

 

Views

63

Likes

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

Navbar dropdown hover

Explorer ,
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.

 

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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.

 

Views

64

Likes

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
Nov 15, 2020 0
LEGEND ,
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>

 

 

 

 

Likes

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
Reply
Loading...
Nov 15, 2020 2
Adobe Community Professional ,
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, ACP

Likes

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
Reply
Loading...
Nov 15, 2020 1
LEGEND ,
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.

Likes

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
Reply
Loading...
Nov 15, 2020 1
Explorer ,
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!

 

Likes

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
Reply
Loading...
Nov 15, 2020 0
Adobe Community Professional ,
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?

 


Ben

Likes

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
Reply
Loading...
Nov 15, 2020 3
LEGEND ,
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?

 

 

Likes

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
Reply
Loading...
Nov 15, 2020 1
Adobe Community Professional ,
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.


Ben

Likes

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
Reply
Loading...
Nov 15, 2020 1
osgood_ LATEST
LEGEND ,
Nov 16, 2020

Copy link to clipboard

Copied

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.

Likes

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
Reply
Loading...
Nov 16, 2020 0