Support » Theme: OceanWP » Sticky sidebar and vertical header

  • Hello,
    First of all, thanks for this great theme and fast support.
    I have 2 menus in my website, one on vertical header and another concerns a table of content in the right sidebar.
    I would need to have both menus sticky, with a scrollbar if necessary. So, I downloaded both plugins (“Ocean Stick Anything” and “Ocean Extra”). When I add the CSS selector, it does not work (I added for the right sidebar the ID “right-sidebar” and “right-sidebar-inner”).
    Do you have any idea on how I can add a fixed or sticky menus?
    Thanks.

Viewing 15 replies - 1 through 15 (of 18 total)
  • Hello,

    Will you please share your site link so that we can provide you the best possible solution to resolve your issue?

    Thread Starter VM06

    (@vm06)

    Thanks for your quick reply. The problem is that it is not on line. Only on localhost.

    Okay, then please share a screenshot. If possible, we will provide the best possible solution to resolve your issue.

    Thread Starter VM06

    (@vm06)

    Hello Amit,

    Thanks for your answer and sorry for late reply.
    Here is a screenshot.
    Link
    Do not hesitate in asking me more questions if necessary.
    Thanks.

    • This reply was modified 5 years, 6 months ago by VM06.

    Hello,

    Please share the link of the screenshot.

    Thread Starter VM06

    (@vm06)

    Sorry, I edited the message

    Hello VM06,

    Method – 1> You need to add class widget-area.sidebar-primary in Ocean Stick Anything plugin and add the following code for the scrollbar.

    .widget-area.sidebar-primary {
        overflow-y: scroll;
    }

    Method – 2> You can also achieve this by adding the code given below.

    Add the following code in your customizer > custom CSS/JS

    .widget-area.sidebar-primary {
        position: fixed;
        right: 2%;
        overflow-y: scroll;
    }

    Please edit the code as per your need.

    Thread Starter VM06

    (@vm06)

    Thanks Amit for your answer. The scrollbar was well added but there is no fixed function. The sidebar is not fixed. Even if I add position : fixed in the inspector, it does not work.

    Thread Starter VM06

    (@vm06)

    I would also like to have the vertical menu on left in fixed position.
    Thanks.

    Hello,

    Sometimes it is difficult to provide a solution without viewing the site online. Hope you understand it.

    Vertical menu is already sticky. Customize > header > vertical style > uncheck close header checkbox to remove close icon button. Are you using a custom header template for the vertical menu?

    For the sidebar, I just give you the class name tested on my site. It will be good if I can check your site and provide you a possible solution for it.

    Thread Starter VM06

    (@vm06)

    Hello Amit,

    So, concerning the vertical menu, for me, it is not sticky. When I scroll down the page, the menu is not visible.
    It is not a custom header template.
    And concerning the sidebar, sure I understand. The site will be very soon online. So, at that moment, I will give you a link to check the problem (it is perhaps the plugin I added that causes the problem).

    So if you have any idea on the vertical sticky menu.
    And another question please : is it possible not to have the close header template from 960px to 1280px, and have directly the mobile template?

    Thanks for everything.

    Hello,

    Go to Customize > header > general > set collapse width 320 in vertical header style

    do the same again in Customize > header > mobile menu > breakpoints and choose from 320.

    Adjust the width as per your need.

    Thread Starter VM06

    (@vm06)

    Thanks Amit, it works. And just for the sticky vertical menu : when you add many items in the menu, they are not fixed, and I would like for them to have a fixed position with a scroll bar if needed.
    Do you have any idea?
    Thanks again.

    Hello,

    Try adding the code in Custom CSS/JS

    body.vertical-header-style.left-header #site-header.vertical-header {
        position: fixed;
        overflow-y: scroll;
    }
    Thread Starter VM06

    (@vm06)

    Thanks for your answer. But the vertical header is not fixed (when the page is scrolled, the header scrolls also, with the page). Even if I add the code in the inspector, it is not possible to have the left (or right) menu fixed. It is perhaps the theme configuration.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Sticky sidebar and vertical header’ is closed to new replies.