Home Forums Porto Template dropdown-submenu doesn't work on mobile

This topic contains 15 replies, has 2 voices, and was last updated by  jeff. This post has been viewed 656 timeslipski@dynabrade. This post has been viewed 656 timescom 8 months, 3 weeks ago. This post has been viewed 656 times

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #10025106

    Hello,

    How are you today?
    When browser window is scaled to a mobile size the “dropdown-submenu” links do not appear when selected.
    They do work when the browser window is at a size where the navigation menu links are NOT in the “hamburger icon”.
    Please help I have a deadline approaching soon.
    Also, this website is on a private directory due to development.
    I can send code yet this form errors when I try.

    Thank you,
    Jeff



    Template Version: 5.7.2
    #10025107
    <!-- Service & Support Start -->
                                                        <li class="dropdown">
    														<a href="#">
    															Service & Support
    														</a>
    													
    														<ul class="dropdown-menu">
    															<li class="dropdown-submenu">
    																<a href="#">Product Support</a>
    																<ul class="dropdown-menu">
    																	<li class="dropdown-submenu">
    																		<a href="#">Libraries</a>
    																		<ul class="dropdown-menu">
    																			<li><a>Manuals/Technical Documents<span class="tip tip-dark">Use Search Field</span></a></li>
    																			<li><a href="catalogs-broch-dyn.html">Catalogs/Brochures</a></li>
    																			<!-- <li><a href="#">Logos & Images</a></li> -->
    																			<li><a href="#">Safety (SDS)</a></li>
    																			<li><a href="http://www.youtube.com/user/DynabradeInc" target="_blank">Videos</a></li>
    																		</ul>
    																	</li>
    																	<li><a href="ltw-statements.html">Lifetime Warranty</a></li>
    																	<li><a href="#">Repairs</a></li>
    																	
    																</ul>
    															</li>
    															<li class="dropdown-submenu">
    																<a href="training-dyn.html">Training</a>
    															</li>
    															<li class="dropdown-submenu">
    																<a href="tradeshows-timeline-dyn.html">Trade Shows/Exhibitions</a>
    														   </li>
    														   <li class="dropdown-submenu">
    																<a href="https://www.dynabrade.com/customers2/" target="_blank">Distributor Portal</a>
    															</li>
    															<li class="dropdown-submenu">
    																<a href="http://www.dynabrade.com/dyn10/content.php?page=employeelinks" target="_blank">Employee Portal</a>
    															</li>
    														</ul>
    													</li>
    <!-- Service & Support End -->

    • This reply was modified 9 months ago by  Support2.
    #10025112

    Support2
    Keymaster

    Hello Jeff :),

    It’s missing the class “dropdown-toggle” on each <a> before the <ul class="dropdown-menu">. Change like the code below:

    .
    ..
    ...
    ....
    <li class="dropdown">
    	<a href="#" class="dropdown-toggle">
    		Service & Support
    	</a>
    	<ul class="dropdown-menu">
    		<li class="dropdown-submenu">
    			<a href="#" class="dropdown-toggle">Product Support</a>
    			<ul class="dropdown-menu">
    				<li class="dropdown-submenu">
    					<a href="#" class="dropdown-toggle">Libraries</a>
    					<ul class="dropdown-menu">
    						<li><a>Manuals/Technical Documents<span class="tip tip-dark">Use Search Field</span></a></li>
    						<li><a href="catalogs-broch-dyn.html">Catalogs/Brochures</a></li>
    						<!-- <li><a href="#">Logos & Images</a></li> -->
    						<li><a href="#">Safety (SDS)</a></li>
    						<li><a href="http://www.youtube.com/user/DynabradeInc" target="_blank">Videos</a></li>
    					</ul>
    				</li>
    				<li><a href="ltw-statements.html">Lifetime Warranty</a></li>
    ....
    ...
    ..
    .

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10025127

    I made the dropdown-togglechanges and still won’t work.
    See
    Sub links not displaying on mobile.
    Here is the entire page code.

    .
    ..
    ...
    ....
    		
           <!-- Service & Support Start -->
                                                        <li class="dropdown">
    	<a href="#">
    		Service & Support
    	</a>
    	<ul class="dropdown-menu">
    		<li class="dropdown-submenu">
    			<a href="#">Product Support</a>
    			<ul class="dropdown-menu">
    				<li class="dropdown-submenu">
    					<a href="#">Libraries</a>
    					<ul class="dropdown-menu">
    						<li><a>Manuals/Technical Documents<span class="tip tip-dark">Use Search Field</span></a></li>
    						<li><a href="catalogs-broch-dyn.html">Catalogs/Brochures</a></li>
    						<!-- <li><a href="#">Logos & Images</a></li> -->
    						<li><a href="#">Safety (SDS)</a></li>
    						<li><a href="http://www.youtube.com/user/DynabradeInc" target="_blank">Videos</a></li>
    					</ul>
    				</li>
    				<li><a href="ltw-statements.html">Lifetime Warranty</a></li>
    
    																	<li><a href="#">Repairs</a></li>
    																	
    																</ul>
    															</li>
    															<li class="dropdown-submenu">
    																<a href="training-dyn.html">Training</a>
    															</li>
    															<li class="dropdown-submenu">
    																<a href="tradeshows.html">Trade Shows/Exhibitions</a>
    														   </li>
    														   <li class="dropdown-submenu">
    																<a href="https://www.dynabrade.com/customers2/" target="_blank">Distributor Portal</a>
    															</li>
    															<li class="dropdown-submenu">
    																<a href="http://www.dynabrade.com/dyn10/content.php?page=employeelinks" target="_blank">Employee Portal</a>
    															</li>
    														</ul>
    													</li>
    		<!-- Service & Support End -->
    
    ....
    ...
    ..
    .

    • This reply was modified 9 months ago by  Support2.
    #10025130

    Support2
    Keymaster

    Hello,

    Still is missing the class “dropdown-toggle” on each <a> before the <ul class="dropdown-menu">.
    Please, add like explained in my previous reply.

    WRONG:

    <a href="#">Product Support</a>
        <ul class="dropdown-menu">

    RIGHT:

    <a href="#" class="dropdown-toggle">Product Support</a>
        <ul class="dropdown-menu">

    * Do the same for all menu items that have sub menu items.

    Kind Regards,

    Rodrigo.


    #10025136

    I’m sorry but I don’t see what your referring to.
    I have the class=”dropdown-toggle” on every menu item that has a submenu item.
    See my code below. I sear I’m not trying to be difficult.

    See lines:
    <a href="#">Service & Support</a>
    <a href="#">Product Support</a>
    <a href="#">Libraries</a>
    
    
    .
    ..
    ...
    ....
    <!-- Service & Support Start -->
             <li class="dropdown">
    			<a href="#">Service & Support</a>
    			<ul class="dropdown-menu">
    		 		<li class="dropdown-submenu">
    			<a href="#">Product Support</a>
    			<ul class="dropdown-menu">
    				<li class="dropdown-submenu">
    					<a href="#">Libraries</a>
    					<ul class="dropdown-menu">
    						<li><a>Manuals/Technical Documents<span class="tip tip-dark">Use Search Field</span></a></li>
    						<li><a href="catalogs-broch-dyn.html">Catalogs/Brochures</a></li>
    						<!-- <li><a href="#">Logos & Images</a></li> -->
    						<li><a href="#">Safety (SDS)</a></li>
    						<li><a href="http://www.youtube.com/user/DynabradeInc" target="_blank">Videos</a></li>
    					</ul>
    				</li>
    				<li><a href="ltw-statements.html">Lifetime Warranty</a></li>
    
    				<li><a href="#">Repairs</a></li>
    																	
    					</ul>
    				</li>
    					<li class="dropdown-submenu">
    					<a href="training-dyn.html">Training</a>
    					</li>
    					<li class="dropdown-submenu">
    					<a href="tradeshows.html">Trade Shows/Exhibitions</a>
    					</li>
    					<li class="dropdown-submenu">
    					<a href="https://www.dynabrade.com/customers2/" target="_blank">Distributor Portal</a>
    					</li>
    					<li class="dropdown-submenu">
    					<a href="http://www.dynabrade.com/dyn10/content.php?page=employeelinks" target="_blank">Employee Portal</a>
    					</li>
    					</ul>
    					</li>
    		<!-- Service & Support End -->
    ....
    ...
    ..
    .

    • This reply was modified 8 months, 4 weeks ago by  Support2.
    #10025140

    Support2
    Keymaster

    Hello :),

    Please see with attention the code your pasted here for us, you will see that “dropdown-toggle” class has not added to the <a> elements.
    This is the reason of submenus don’t show on mobile, you need that class on HTML for made it work.

    You need change the <a> elements to:

    <a href="#" class="dropdown-toggle">Service & Support</a>
    
    <a href="#" class="dropdown-toggle">Product Support</a>
    
    <a href="#" class="dropdown-toggle">Libraries</a>

    * note the class “dropdown-toggle”.

    Kind Regards,

    Rodrigo.


    #10025145

    This code was copied directly from the page and I have the class=”dropdown-toggle” in the menu links.
    Am I missing something? Please refer to this code here only.

    <!-- Service & Support Start -->
             <li class="dropdown">
    			<a href="#">Service & Support</a>
    			<ul class="dropdown-menu">
    		 		<li class="dropdown-submenu">
    			<a href="#">Product Support</a>
    			<ul class="dropdown-menu">
    				<li class="dropdown-submenu">
    					<a href="#">Libraries</a>
    					<ul class="dropdown-menu">
    						<li><a>Manuals/Technical Documents<span class="tip tip-dark">Use Search Field</span></a></li>
    						<li><a href="catalogs-broch-dyn.html">Catalogs/Brochures</a></li>
    						<!-- <li><a href="#">Logos & Images</a></li> -->
    						<li><a href="#">Safety (SDS)</a></li>
    						<li><a href="http://www.youtube.com/user/DynabradeInc" target="_blank">Videos</a></li>
    					</ul>
    				</li>
    				<li><a href="ltw-statements.html">Lifetime Warranty</a></li>
    
    				<li><a href="#">Repairs</a></li>
    																	
    					</ul>
    				</li>
    					<li class="dropdown-submenu">
    					<a href="training-dyn.html">Training</a>
    					</li>
    					<li class="dropdown-submenu">
    					<a href="tradeshows.html">Trade Shows/Exhibitions</a>
    					</li>
    					<li class="dropdown-submenu">
    					<a href="https://www.dynabrade.com/customers2/" target="_blank">Distributor Portal</a>
    					</li>
    					<li class="dropdown-submenu">
    					<a href="http://www.dynabrade.com/dyn10/content.php?page=employeelinks" target="_blank">Employee Portal</a>
    					</li>
    					</ul>
    					</li>
    		<!-- Service & Support End -->

    • This reply was modified 8 months, 4 weeks ago by  Support2.
    #10025146

    Do I need it on every link or just those with sub-menus?

    <!-- Service & Support Start
             <li class="dropdown">
    			<a href="#">Service & Support</a>
    			<ul class="dropdown-menu">
    		 		<li class="dropdown-submenu">
    			<a href="#">Product Support</a>
    			<ul class="dropdown-menu">
    				<li class="dropdown-submenu">
    					<a href="#">Libraries</a>
    					<ul class="dropdown-menu">
    						<li><a>Manuals/Technical Documents<span class="tip tip-dark">Use Search Field</span></a></li>
    						<li><a href="catalogs-broch-dyn.html">Catalogs/Brochures</a></li>
    						<!-- <li><a href="#">Logos & Images</a></li> -->
    						<li><a href="#">Safety (SDS)</a></li>
    						<li><a href="http://www.youtube.com/user/DynabradeInc" target="_blank">Videos</a></li>
    					</ul>
    				</li>
    				<li><a href="ltw-statements.html">Lifetime Warranty</a></li>
    
    				<li><a href="#">Repairs</a></li>
    																	
    					</ul>
    				</li>
    					<li class="dropdown-submenu">
    					<a href="training-dyn.html">Training</a>
    					</li>
    					<li class="dropdown-submenu">
    					<a href="tradeshows.html">Trade Shows/Exhibitions</a>
    					</li>
    					<li class="dropdown-submenu">
    					<a href="https://www.dynabrade.com/customers2/" target="_blank">Distributor Portal</a>
    					</li>
    					<li class="dropdown-submenu">
    					<a href="http://www.dynabrade.com/dyn10/content.php?page=employeelinks" target="_blank">Employee Portal</a>
    					</li>
    					</ul>
    					</li>
    		Service & Support End -->

    • This reply was modified 8 months, 4 weeks ago by  Support2.
    #10025147
    <!-- Service & Support Start -->
             <li class="dropdown">
    			<a href="#" class="dropdown-toggle">Service & Support</a>
    			<ul class="dropdown-menu">
    		 		<li class="dropdown-submenu">
    			<a href="#" class="dropdown-toggle">Product Support</a>
    			<ul class="dropdown-menu">
    				<li class="dropdown-submenu">
    					<a href="#" class="dropdown-toggle">Libraries</a>
    					<ul class="dropdown-menu">
    						<li><a>Manuals/Technical Documents<span class="tip tip-dark">Use Search Field</span></a></li>
    						<li><a href="catalogs-broch-dyn.html">Catalogs/Brochures</a></li>
    						<!-- <li><a href="#">Logos & Images</a></li> -->
    						<li><a href="#">Safety (SDS)</a></li>
    						<li><a href="http://www.youtube.com/user/DynabradeInc" target="_blank">Videos</a></li>
    					</ul>
    				</li>
    				<li><a href="ltw-statements.html">Lifetime Warranty</a></li>
    
    				<li><a href="#">Repairs</a></li>
    																	
    					</ul>
    				</li>
    					<li class="dropdown-submenu">
    					<a href="training-dyn.html">Training</a>
    					</li>
    					<li class="dropdown-submenu">
    					<a href="tradeshows.html">Trade Shows/Exhibitions</a>
    					</li>
    					<li class="dropdown-submenu">
    					<a href="https://www.dynabrade.com/customers2/" target="_blank">Distributor Portal</a>
    					</li>
    					<li class="dropdown-submenu">
    					<a href="http://www.dynabrade.com/dyn10/content.php?page=employeelinks" target="_blank">Employee Portal</a>
    					</li>
    					</ul>
    					</li>
    		<!-- Service & Support End -->

    • This reply was modified 8 months, 4 weeks ago by  Support2.
    • This reply was modified 8 months, 4 weeks ago by  Support2.
    #10025155

    Support2
    Keymaster

    Hello :),

    The code in your last reply is correct now.
    If the problem still persists, please send a online link of your website for us, so we can inspect your code and discover where is the problem.

    Kind Regards,

    Rodrigo.


    #10025171
    This reply has been marked as private.
    #10025176

    Support2
    Keymaster

    Hello Jeff,

    Sure, we don’t will share or turn public 🙂

    The problem is the file “js/theme.js” that have some modifications.
    Please, replace all code of this file with on link below:
    http://preview.oklerthemes.com/porto/5.7.2/js/theme.js

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10025194

    Thank you that worked after clearing browser cache on mobile too.
    How do I get the submenus to open to the right only, instead of left and/or right.

    Thank you,
    Jeff


    #10025213

    Support2
    Keymaster

    Hello Jeff,

    Just comment or remove the code showed below:

    (js/theme.js):

    Please, try that and let me know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10025215

    Thank you 🙂


Viewing 16 posts - 1 through 16 (of 16 total)