Home Forums Porto Template Side menu

This topic contains 9 replies, has 2 voices, and was last updated by  Support2 18 hours, 36 minutes ago. This post has been viewed 76 times

Viewing 10 posts - 1 through 10 (of 10 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 days, 12 hours 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.


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