Home Forums Porto Admin Template Sidebar on mobile (while using two navigation layout).

This topic contains 3 replies, has 2 voices, and was last updated by  Support2 5 months ago. This post has been viewed 180 times

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #10026515

    ignasi
    Participant

    Hello!
    I need to know how can I enable sidebar on mobile (while using two navigation layout).
    Thanks in advance!!!



    Template Version: Version 2.1.1
    #10026516

    Support2
    Keymaster

    Hello, thanks for your purchase.

    We can create a new fixed button to toggle the sidebar on mobile.
    Please follow the steps below:

    1) First add a toggle button to open the sidebar on mobile:

    <div class="show-sidebar-mobile d-md-none">
    	<div class="sidebar-toggle d-md-none" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-toggle">
            <i class="fas fa-bars" aria-label="Toggle sidebar"></i>
        </div>
    </div>
    
    <!-- start: sidebar -->
    <aside id="sidebar-left" class="sidebar-left">
    
        <div class="sidebar-header">
    ....
    ...
    ..
    .

    2) Add a toggle button for close the sidebar when it’s opened:

    <div class="inner-wrapper">
    	<!-- start: sidebar -->
    	<aside id="sidebar-left" class="sidebar-left">
    	
    	    <div class="sidebar-header">
    	        <div class="sidebar-title">
    	            Navigation
    	        </div>
    	        <div class="sidebar-toggle d-none d-md-block" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
    	            <i class="fas fa-bars" aria-label="Toggle sidebar"></i>
    	        </div>
    	        <div class="sidebar-toggle d-md-none" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-toggle">
    	            <i class="fas fa-bars" aria-label="Toggle sidebar"></i>
    	        </div>
    	    </div>
    .....
    ....
    ...
    ..
    .

    3) Add the code below in (css/custom.css):

    .show-sidebar-mobile .sidebar-toggle {
        position: fixed;
        top: 200px;
        left: 0;
        width: 50px;
        height: 50px;
        background: #171717;
        z-index: 97;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: #FFF;
    }

    4) Optional: If you want remove the sidebar items from menu on mobile, just change the HTML of “More” item to:

    <li class="dropdown d-none">
        <a href="#" class="nav-link dropdown-toggle">More</a>

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

    Kind Regards,

    Rodrigo.


    • This reply was modified 5 months ago by  Support2.
    #10026517

    ignasi
    Participant

    What a quick response!
    Let me check it all and I tell you.
    Thanks!!!


    #10026520

    Support2
    Keymaster

    Hello :),

    We updated the code on step 4 of last answer. Was with wrong classname, the correct is “d-none”.

    Kind Regards,

    Rodrigo.


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