Home Forums Porto Template Side menu

This topic contains 15 replies, has 2 voices, and was last updated by  Support2 5 months, 4 weeks ago. This post has been viewed 323 times

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

    Marty
    Participant

    Hi,

    Does the Porto template offers the option for a collapsable side-menu? I want to place it in the sidebar. It does not replace the header, but it’s meant for selectable categories (multi-level).

    Please let me know. Thanks!


    #10028546

    Support2
    Keymaster

    Hello, thanks for your purchase.

    With some custom code we can do that.

    1) HTML:

    <h4 class="heading-primary">Categories</h4>
    <ul class="nav nav-list flex-column mb-5 collapsable-list">
    	<li class="nav-item"><a class="nav-link" href="#">Design (2)</a></li>
    	<li class="nav-item" class="active">
    		<a class="nav-link collapse-toggle" href="test.html">Photos (4)</a>
    		<ul class="collapse show">
    			<li class="nav-item"><a class="nav-link" href="#">Animals</a></li>
    			<li class="nav-item"><a class="nav-link active" href="#">Business</a></li>
    			<li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
    			<li class="nav-item"><a class="nav-link" href="#">People</a></li>
    		</ul>
    	</li>
    	<li class="nav-item">
    		<a class="nav-link collapse-toggle" href="#">Videos (3)</a>
    		<ul class="collapse">
    			<li class="nav-item"><a class="nav-link" href="#">Animals</a></li>
    			<li class="nav-item"><a class="nav-link active" href="#">Business</a></li>
    			<li class="nav-item"><a class="nav-link" href="#">Sports</a></li>
    			<li class="nav-item"><a class="nav-link" href="#">People</a></li>
    		</ul>
    	</li>
    	<li class="nav-item"><a class="nav-link" href="#">Lifestyle (2)</a></li>
    	<li class="nav-item"><a class="nav-link" href="#">Technology (1)</a></li>
    </ul>

    2) Add in (js/custom.js):

    $('.collapsable-list li a.collapse-toggle').on('click', function(e){
    	e.preventDefault();
    
    	$('.collapsable-list').find('a').next().collapse('hide');
    	$(this).next().collapse('toggle');
    });

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

    Kind Regards,

    Rodrigo.


    #10028563

    Marty
    Participant

    Hi Rodrigo,

    That’s great to start with! I do have 2 (or 3 actually) additional wishes though.

    1) I would like the collapsible categories (with subcategories) to be clickable as a link as well. So the parent category itself is a link, but is also collapsible to show it’s subcategories.
    2) I would like to add another 1 or 2 levels. So subcategories can have subcategories of their own again.

    I would also like to change the indenting to have some more space for the subcategories.

    Current
    Current

    What I would like
    What I would like

    Thanks again!


    • This reply was modified 6 months, 1 week ago by  Marty.
    #10028570

    Support2
    Keymaster

    Hello,

    In that case please use the code below. You can delete the JS code of previous solution.

    HTML:
    https://pastebin.com/raw/0L5t6Lps

    (css/custom.css):

    .custom-nav-list-style li a:before {
    	content: none !important;
    }

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

    Kind Regards,

    Rodrigo.


    #10028608

    Marty
    Participant

    Hi Rodrigo,

    Almost perfect! I just need to fix the indenting, so the multiple levels of categories fit in the sidebar.
    Can you help with that?

    Current

    Less indenting/white space from the side


    #10028615

    Support2
    Keymaster

    Hello,

    Try with the code below:
    https://pastebin.com/raw/aMHqBwyH

    Basically we removed the margin from <ul> with the class ml-0.

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

    Kind Regards,

    Rodrigo.


    #10028619

    Marty
    Participant

    Hi Rodrigo,

    Perfect! Last thing, I want to reduce the left-margin for the parent categories as well. And reduce the left-margin for the subcategories even further, since left-margin=0 still leaves pretty much white space. Can you help with that?

    This is how it looks now, I want to reduce left-margin on parent categories and a little bit more reduce of left-margin on subcategories.

    Thanks again!


    #10028622

    Support2
    Keymaster

    Hello,

    You can control the left and right padding/margin with the classes:
    – pl-1, pl-2, pl-3, pl-4, pl-5 (padding left)
    – ml-1, ml-2, ml-3, ml-4, ml-5 (margin left)

    On the example below I just added the class “pl-2” to the top parents:
    https://pastebin.com/raw/XWfGbWPJ

    Hope it helps.

    Kind Regards,

    Rodrigo.


    #10028624

    Marty
    Participant

    Perfect!

    If a category is collapsed, I would like the font-awesome icon to change from [+] to [-] (I already have the icons instead of the arrows, just need to change it on collapse) is this possible?

    So in this image, Sportnieuws should have [-] instead of [+] because it is already collapsed.


    #10028652

    Support2
    Keymaster

    Hello,

    You can do that with the code below in (css/custom.css):

    i[data-toggle]:not(.collapsed):before {
    	content: "\f146";
    }

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

    Kind Regards,

    Rodrigo.


    #10028666

    Marty
    Participant

    Hi,

    It does show the minus-square after a category is collapsed, however it also shows the minus-square initially on page load. Default should be the plus square, the minus square should only be shown when a category is collapsed. How can I set the initial icon to plus square?

    Also, there could be an active category. I want that concerned category to be collapsed on page load and also show the minus square icon, because it is already collapsed.


    #10028679

    Support2
    Keymaster

    Hello,

    For start on first load with all collapsed, you need just add the class collapsed on the icons and remove the show class from <ul>. For example:
    https://pastebin.com/raw/QkD3tUwK

    To start with a specific category expanded, you need remove the class collapsed from the icon element and add the class show on the <ul>. For example:
    https://pastebin.com/raw/FEHe5Mtn

    Hope it helps.

    Kind Regards,

    Rodrigo.


    #10028737

    Marty
    Participant

    Hi Rodrigo,

    Thanks! The menu is perfect now on desktop. For mobile, I would like the menu to be expandable (preferably) from the side with hamburger icon. Is this possible?

    – Can I also show/hide div’s on mobile devices?
    – Can I change the order of div’s on mobile devices?

    Thanks again!


    #10028752

    Support2
    Keymaster

    Hello,

    Sorry but i’m little confused about this question:

    I would like the menu to be expandable (preferably) from the side with hamburger icon. Is this possible

    Can you explain with more details ?

    Regarding show/hide divs on mobile, you can do that with display classes from Bootstrap 4:

    <!-- Show only on desktops -->
    <div class="d-none d-lg-block"></div>
    
    <!-- Show only on mobile -->
    <div class="d-lg-none"></div>

    * https://getbootstrap.com/docs/4.3/utilities/display/#hiding-elements

    Regarding the order here is an example:
    https://getbootstrap.com/docs/4.3/utilities/flex/#order

    Kind Regards,

    Rodrigo.


    #10028780

    Marty
    Participant

    Hi,

    What I meant is hiding the category menu on mobile and only show it as a side-menu when a hamburger-icon is clicked.
    Somewhat similar like below.


    #10028787

    Support2
    Keymaster

    Hello,

    Porto doesn’t comes with a ready feature for that, but you can do with the following custom code:

    1) Change the html tag to:

    <html class="side-header-hide">

    2) Add this custom HTML for sidebar after the div body:

    <div class="body">
    	<div class="custom-mobile-sidebar d-lg-none">
    		<button class="hamburguer-btn hamburguer-btn-side-header active" data-set-active="false">
    			<span class="close">
    				<span></span>
    				<span></span>
    			</span>
    		</button>
    		<!-- CATEGORIES HTML GOES HERE -->
    		<ul class="nav nav-list flex-column custom-nav-list-style">
                          .......
                    </ul>
    	</div>

    3) On the categories HTML do something like the code below:

    <button class="hamburguer-btn d-lg-none" data-set-active="false">
    	<span class="hamburguer">
    		<span></span>
    		<span></span>
    		<span></span>
    	</span>
    </button>
    <ul class="nav nav-list flex-column custom-nav-list-style d-none d-lg-block">
        .......
    </ul>

    4) Add in (css/custom.css):

    .custom-mobile-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 280px;
        height: 100vh;
        transform: translate3d(-100%, 0, 0);
        padding: 1rem;
        background: #FFF;
        border-right: 1px solid #CCC;
        transition: ease transform 300ms;
        padding-top: 80px;
    }
    
    html:not(.side-header-hide) .custom-mobile-sidebar {
        transform: translate3d(0, 0, 0) !important;
    }

    Hope it helps.

    Kind Regards,

    Rodrigo.


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