YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar majd.malki asked

Enable click mode (Accordion) on text separators in offcanvas (mobile) menu.

There is an option in header settings to enable click mode (Accordion) on text separators in menu for dropdown menu, but i need this functionality in the offcanvas(mobile) menu.

i have seen your tutorials for the warp framework. but how can achieve this in Yootheme Pro?

  • WordPress
  • YOOtheme Pro

2 Answers

0

Avatar thomas.p Support answered

Hi majd.malki,

there's no option to display the offcanvas menu as accordion by now, but I think this has already been requested to put on the to-do list. I recommend you to vote for the following requests or add your own request.

https://yootheme.com/support/question/103519#answer-344704
https://yootheme.com/support/question/103519#answer-334283

As a workaround, you could create a custom accordion. It'll be some effort to maintain, though.

  • create a new custom HTML module
  • as position select mobile
  • enter your custom UIkit 3 nav accordion code, e.g.

    <div class="uk-width-1-2@s uk-width-2-5@m">  
        <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>  
            <li class="uk-active"><a href="#">Active</a></li>  
            <li class="uk-parent">  
                <a href="#">Parent</a>  
                <ul class="uk-nav-sub">  
                    <li><a href="#">Sub item</a></li>  
                    <li>  
                        <a href="#">Sub item</a>  
                        <ul>  
                            <li><a href="#">Sub item</a></li>  
                            <li><a href="#">Sub item</a></li>  
                        </ul>  
                    </li>  
                </ul>  
            </li>  
            <li class="uk-parent">  
                <a href="#">Parent</a>  
                <ul class="uk-nav-sub">  
                    <li><a href="#">Sub item</a></li>  
                    <li><a href="#">Sub item</a></li>  
                </ul>  
            </li>  
        </ul>  
    </div>
    
  • go to Extensions->Templates->Styles->yootheme->OPEN WEBSITE BUILDER->MENUS->MOBILE POSITION and choose - Select - to reset the menu for the mobile position

Image

Kind regards
Thomas

Know someone who can answer? Share a link to this question via email or twitter.