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.