T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
Subscribe via RSS  Subscribe via email
Recent
Categories
Tags
Users
Badges
View Replies (2)

Resolved Problems with nested menu items using nav-pills

0
Votes
Undo
  1. Abdur Rehman
    Abdur Rehman
  2. General Discussion
  3. Friday, 27 June 2014
  4.  Subscribe via email
I have a Nested sidebar menu like below

About Us
- Mission Statement
- Vision
Photo Gallery
Contact Us

The menu is in a sidebar with has the class col-lg-2 and the main content has the class col-lg-10 .... so the sidebar is pretty thin.

When I hover over "About Us" I find two other nested menu items (Mission Statement and Vision). However, they quickly disappear as soon as I drag my mouse to click on the link. So I have to try multiple times, over and over again until I can click on the two menu items.

three solutions to this problem (that I can think of)

1) Add delay to hover
2) Display "Mission and Vision" when I click on "About Us" instead of hovering
3) Display a very simple nested menu item as shown above without any dropdown - while retaining the bootstrap style

Has anybody run into this? How did you solve it?

Thanks!!

-arrehman1
  1. nav-pill
Comment
There are no comments made yet.
Accepted Answer
Abdur Rehman
Abdur Rehman
Accepted Answer Pending Moderation
0
Votes
Undo
After fiddling around the with problem - I have found the solution!

There is a 2px margin top on every nested menu. So "Mission Statement" has a 2px margin top. I replaced the 2px with 0px and the problem was solved!

Go to t3-assets -> dev -> theme -> "templates.t3_bs3_blank.less.bootstrap.less"

Update the following code with comment below

.dropdown-menu {

  position: absolute;

  top: 100%;

  left: 0;

  z-index: 1000;

  display: none;

  float: left;

  min-width: 160px;

  padding: 5px 0;

  /* REPLACE the 2px margin top with 0px*/

  /*margin: 2px 0 0;*/

  margin: 0px 0 0;

  list-style: none;

  font-size: 15px;

  background-color: #ffffff;

  border: 1px solid #cccccc; 

  border: 1px solid rgba(0, 0, 0, 0.15);

  border-radius: 4px;

  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

  background-clip: padding-box;

}
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # Permalink
Responses (2)
Gardner Luna
Gardner Luna
Hole-in-One The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Great, you're T3 master now ;)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.