Forum Discussion

nakul's avatar
nakul
Ace
9 years ago

Navigation Toggle Css

Can anyone tell toggle css for navigation
Claudius's avatar
Claudius
Boss
9 years ago
Hi,
Can you clarify what you are looking for? The breadcrumb navigation of your community? Easiest is maybe if you can share a screenshot of the element you are trying to style.
  • irach15's avatar
    irach15
    Maven
    8 years ago

    Claudius,

    I have a question about 'toggle' class too ;-)

    We are re-designing our site main navigation to be a Mega Nav.

    Simplified code:

    <div class="main-nav">
    <ul>
        <li class="dropdown menu-catID"><a href="#" class="dropdown-toggle">Top Category<i class="fa fa-angle-down"></i></a>


          <div class="dropdown-menu">  
                <div>
                  <a class="category-item" href="#" <i class="fa fa-angle-right"></i>Sub Category</a>
                 
                </div>  
                <div>
                  <a class="category-item" href="#" <i class="fa fa-angle-right"></i>Sub Category</a>
                 
                </div>  
                <div>
                  <a class="category-item" href="#" <i class="fa fa-angle-right"></i>Sub Category</a>                 
                </div> 
            </div>
        </li>
    </ul>
</div>

    The question is:

    - how to over-write drop-down toggle behavior 'drop on hover' to 'open on click', stay open and close on click?

    - how to debug Lithium js to see what I need over-write?

    - if I just get rid off 'toggle' class, it messes up everything.

    - I tried using Bootstrap, too much work to debugg and layout issues...

    note: we have same functionality as Lithium community ;-)

    • Claudius's avatar
      Claudius
      Boss
      8 years ago

      I'm not aware of any Lithium CSS classes you could simply apply to elements that would enable a JS menu on hover or click, I'm afraid. So apart from re-using some styling you might actually want to stay away from applying the "toggle" class to your mega nav.

       

      Instead of overwriting Lithium behaviour it's probably easier to implement the specific menu opening/closing behaviour yourself in jQuery.

    • sunny_mody's avatar
      sunny_mody
      Advisor
      8 years ago

      Hi irach15,

       

      If my understanding is correct you want to open dropdown menus on click and not on hover.

      Fot that there is a setting at below link
      communityURL/t5/user/myprofilepage/tab/user-preferences%3Adisplay
      You need to disable check box for "Display menus dynamically with mouse over"