Dropdown Menu Styles - dropdown-toggle

  • Hi,


    I wonder if someone could help.


    I have setup perch menus linked to bootstrap styles and i've setup the CSS to make a new colour for each button using childs.


    The one style I can't seem to get to work is for the 'dropdown-toggle' style to only be active on menus with dropdowns, my template either adds them for all (like below, only About Us has any dropdown items, the other 3 don't, but the toggle icon is still there.) or I have to remove it, which means the user doens't know it is a dropdown unless they click / hover over it.



    bootstrap-menu.jpg


    My item.html code is as below.


    Code
    1. </perch:before>
    2. <li class="nav-item dropdown" <perch:if exists="current_page"> </perch:if>
    3. <perch:if exists="ancestor_page"> class="ancestor"</perch:if>>
    4. <a class="nav-link dropdown-toggle " id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="<perch:pages id="pagePath">"><perch:pages id="pageNavText"></a>
    5. <perch:pages id="subitems" encode="false">
    6. </li>
    7. <perch:after>


    If anyone has done this previously, any advice would be appreciated.


    Thanks.

  • Gareth S

    Approved the thread.
  • I have this working now, thanks for the link.


    Code
    1. <a <perch:if exists="subitems"> class=" dropdown-toggle nav-link" </perch:if> id="navbarDropdown " role="button" data-toggle="dropdown" aria-haspopup="true" class="nav-link" aria-expanded="false" href="<perch:pages id="pagePath">"><perch:pages id="pageNavText"> </a>