Support Center

Sticky Sidebar

Porto Sticky Sidebar

Step 1

Add HTML module to a pane (Example: TopLeftSidebar). Switch to HTML tab & copy the below shortcode:

<aside class="sidebar" id="sidebar" data-plugin-sticky="sticky" data-plugin-options="{'minWidth': 991, 'containerSelector': '.container', 'padding': {'top': 110}}">
    <ul class="nav nav-list mb-xl show-bg-active">
        <li class="active"><a href="#first">First</a></li>
        <li>
            <a href="#second">Second</a>
            <ul>
                <li><a href="#sub-second-1">Sub Second 1</a></li>
                <li><a href="#sub-second-2">Sub Second 2</a></li>
            </ul>
        </li>
        <li><a href="#third">Third</a></li>
    </ul>
</aside> 

 

Step 2

Add HTML module to a pane (Example: TopLeftSidebarOuter). Switch to HTML tab & copy the below shortcode:

<h2 id="first">First</h2>

Here first id in anchor tag matches with menu item href in step 1.

Glad we could be helpful. Thanks for the feedback.

Sorry we couldn't be helpful. Your feedback will help us improve this article.

How helpful was this page?

  
Updated on Tue, 02 May 2023 by HC SuperUser