Click here to Skip to main content
15,877,376 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi guys,

I am building a website using the bootstrap framework and I am stuck with how to keep the drop down menus in my navigation open by default when I view the site in mobile i.e screen resolution of 480px.

Basically what I want to achieve is, if the site is viewed on a mobile device, once the user clicks the navigation toggle button and the navigation item opens, make the drop down list open too and let it stay open.

This is my first time using bootstrap as I am mainly a back-end developer (PHP/MySql , C#.NET)


1 solution

Use javascript to add "hover" class to your menu item.

Current CSS:
.showDropDownMenu {
    display: inline-block;

New CSS:
.showDropDownMenu, showDropDownMenuHoverEffect{
    display: inline-block;

When the nav button is clicked use javascript to walk your menu and add the "hover class (showDropDownMenuHoverEffect)" to the menus you want to display. When the nav button is clicked again use javascript to remove the "hover" class.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900