Tip: Add Custom Dropdown Link in Header Without using JavaScript

4 Commentaires

  • Rash

    @Ifra Saqlain  Thank you for the code here. I did paste the same code to my respective pages as mentioned. But when I click on dropdown link it does not show the dropdowns . Please help me out here what changes has to be made further.

    Thank you in advance

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi Rash, 

    Add the HTML code just above the {{# if signed_in}} helper on header.hbs file, see in the given screenshot:

     

    <div class="dropdown dropdown-link-wrapper">
    <button class="dropdown-toggle">
    <span>Dropdown Link</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="dropdown-chevron-icon" aria-hidden="true">
    <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"></path>
    </svg>
    </button>
    <div class="dropdown-menu" role="menu">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
    <a href="#">Link 6</a>
    <a href="#">Link 7</a>
    <a href="#">Link 8</a>
    </div>
    </div>



     

     

     

     

     

     

    Add the CSS code at the bottom of stylesheet:

    .dropdown.dropdown-link-wrapper {
    display: inline-block;
    }

    .dropdown.dropdown-link-wrapper .dropdown-menu {
    padding: 5px 10px;
    }

    .dropdown.dropdown-link-wrapper .dropdown-menu a{
    display: block;
    }



     

    Try this and let me know:)

    Thanks

    0
  • Rash

    Ifra Saqlain  

    Hello Thank you for your reply. I did the same as you have shown above but when I click on dropdown, the options in the dropdown does not appear 😢. 
    Is there a way where I can get codes for other classes which are mentioned in html code?

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    No problem, can you share the url of your hc here?

     

     

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk