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

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 4 months, 3 weeks ago by Support.
    • This reply was modified 4 months, 3 weeks ago by Support.
Viewing 5 posts - 1 through 5 (of 5 total)