Advertisement:

Author Topic: Bootstrap dropdowns auto-drop on hoover  (Read 1368 times)

SmaRTeY

  • Osclass Hero
  • Hero Member
  • *
  • Posts: 2519
Bootstrap dropdowns auto-drop on hoover
« on: September 08, 2015, 10:55:51 am »
Hi,

I am using a bootstrap theme and I wanted my bootstrap dropdowns to drop when hovering over instead of having to click first.
Very simple solution, add following mark-up in bootstrap (theme) CSS file:
Code: [Select]
.dropdown-menu li:hover .sub-menu {visibility: visible;}.dropdown:hover .dropdown-menu {display: block;}

Hope someone finds it useful :)

Regards,
Eric

raynold

  • Newbie
  • *
  • Posts: 8
Re: Bootstrap dropdowns auto-drop on hoover
« Reply #1 on: September 09, 2015, 05:33:23 pm »
will it work on osclasswizard theme.. and any specific line to put the code.

SmaRTeY

  • Osclass Hero
  • Hero Member
  • *
  • Posts: 2519
Re: Bootstrap dropdowns auto-drop on hoover
« Reply #2 on: September 09, 2015, 06:24:16 pm »
Hi Raynold,

almost 100% certain this will also work for osclasswizard theme since they make use of bootstrap.
You have to add the code to your bootstrap theme css file, making sure it is the last css that gets loaded.
With CSS use, the last loaded css codes are used by the website OR in case you use inline markup (styling inside your pages) the inline markup will take precedence over the markup in css files. This is called 'overriding' so original css can be untouched yet you can make changes but you need to know the order of loading. Cool huh 8)

I haven't technically checked the osclasswizard theme, maybe one of it's users can help you here in case you can't get it to work.

Regards,
Eric

will it work on osclasswizard theme.. and any specific line to put the code.

raynold

  • Newbie
  • *
  • Posts: 8
Re: Bootstrap dropdowns auto-drop on hoover
« Reply #3 on: September 09, 2015, 07:12:54 pm »
Hi Raynold,

almost 100% certain this will also work for osclasswizard theme since they make use of bootstrap.
You have to add the code to your bootstrap theme css file, making sure it is the last css that gets loaded.
With CSS use, the last loaded css codes are used by the website OR in case you use inline markup (styling inside your pages) the inline markup will take precedence over the markup in css files. This is called 'overriding' so original css can be untouched yet you can make changes but you need to know the order of loading. Cool huh 8)

I haven't technically checked the osclasswizard theme, maybe one of it's users can help you here in case you can't get it to work.

Regards,
Eric

will it work on osclasswizard theme.. and any specific line to put the code.
HI smaRTey
the file i have here is bootstrap.min.css. sorry please do you mean i should make it the last line of code in that file.

SmaRTeY

  • Osclass Hero
  • Hero Member
  • *
  • Posts: 2519
Re: Bootstrap dropdowns auto-drop on hoover
« Reply #4 on: September 09, 2015, 08:28:20 pm »
All I can tell right now is that if that is the only css file the answer should be yes.
Paste the line straight after the last character of the css file and just test it.

If it works you'll know very quick but do not mistake the bootstrap drop downs with the other dropdowns possibly used in the theme!

Just play around with it, you can't really break things here (yes you could mess up the whole website look) and if it breaks just put back the backup you created before you started playing around and you'll be good again. ;)


Regards,
Eric

Hi Raynold,

almost 100% certain this will also work for osclasswizard theme since they make use of bootstrap.
You have to add the code to your bootstrap theme css file, making sure it is the last css that gets loaded.
With CSS use, the last loaded css codes are used by the website OR in case you use inline markup (styling inside your pages) the inline markup will take precedence over the markup in css files. This is called 'overriding' so original css can be untouched yet you can make changes but you need to know the order of loading. Cool huh 8)

I haven't technically checked the osclasswizard theme, maybe one of it's users can help you here in case you can't get it to work.

Regards,
Eric

will it work on osclasswizard theme.. and any specific line to put the code.
HI smaRTey
the file i have here is bootstrap.min.css. sorry please do you mean i should make it the last line of code in that file.