Home Forums Porto Template Menu not functioning on iPad – Landscape mode

This topic contains 4 replies, has 2 voices, and was last updated by  Support 2 weeks, 5 days ago. This post has been viewed 60 times

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10030556

    rgontech
    Participant

    I maintain the website referenced above. When the website is viewed on an ipad in portrait, I see the mobile “hamburger” menu, as normal. But when switched to “landscape”, the menus don’t display correctly. The drop-down behavior is the problem…they don’t collapse. So, when the user tries to open another drop down, the others remain open. Clicking on the menu in an attempt to “collapse” it, only results in an error. I don’t even know where to begin troubleshooting.

    I based the site on the “Medical” demo, if that helps.


    #10030561

    Support
    Keymaster

    Hello,

    Please make sure the links structure and classes are set the same way that we set in our index-classic.html file, for example:

    <li class="dropdown">
    	<a class="dropdown-item dropdown-toggle active" href="index.html">
    		Home
    	</a>
    	<ul class="dropdown-menu">
    		<li>
    			<a class="dropdown-item" href="index.html">
    				Page 1
    			</a>
    		</li>
    	....

    Make sure you add the href.

    Here’s the functional example: http://preview.oklerthemes.com/porto/7.4.0/index-classic.html

    Let me know if you have any questions.

    Kind Regards.


    #10030563

    rgontech
    Participant
    This reply has been marked as private.
    #10030564

    rgontech
    Participant
    This reply has been marked as private.
    #10030579

    Support
    Keymaster

    Hello, OK, great, got it now.

    In that case to make the dropdown appear on table you would have to remove the main link (and use # instead), for example:

    <a class="nav-link dropdown-toggle" class="dropdown-toggle" href="#">
    	Departments
    </a>
    <ul class="dropdown-menu">
    	<li><a class="dropdown-item" href="demo-medical-departments-detail.html">Cardiology</a></li>
    	<li><a class="dropdown-item" href="demo-medical-departments-detail.html">Gastroenterology</a></li>
    </ul>

    It would make the dropdown appear on Ipad when you click in the Deparments link.

    Another option is to do that with JS, for example:

    HTML:

    <a class="nav-link dropdown-toggle" class="dropdown-toggle" href="demo-medical-departments.html" data-remove-link-on-mobile>
    	Departments
    </a>
    <ul class="dropdown-menu">
    	<li><a class="dropdown-item" href="demo-medical-departments-detail.html">Cardiology</a></li>
    	<li><a class="dropdown-item" href="demo-medical-departments-detail.html">Gastroenterology</a></li>
    </ul>

    JS: (js/custom.js)

    if($.browser.mobile) {
    	$('[data-remove-link-on-mobile]').attr('href', '#');
    }

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    • This reply was modified 2 weeks, 5 days ago by  Support.
    • This reply was modified 2 weeks, 5 days ago by  Support.
Viewing 5 posts - 1 through 5 (of 5 total)