Responsive sidebar?

  • I’m using the OceanWP theme (with Elementor, but I don’t think that’s relevant to this issue).

    I have created a number of pages with a left hand sidebar that contains a set of menu items inherited from the page’s nav menu sub-items. I displays fine on a desktop window. However, when I narrow the browser window to tablet or cellphone dimensions, the sidebar shows up below the content. Clearly, this is not very useful. On the other hand, if it were to show up above the content, it would interfere with readability. The referenced page is an example of what happens.

    Is there a way in OceanWP (perhaps with the help of a plugin?) of controlling where the sidebar displays, or even to change to something like a hamburger menu, or something that can be brought in from the side?

    Any help or suggestions you can provide would be most appreciated!

    Thanks!

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)

  • Hello,

    I didn’t understand your query clearly. Can you share a screenshot so that I can understand it and help you to fix it?

    Thread Starter bryanhiggs

    (@bryanhiggs)

    Go to the URL I provided, and view it in a cellphone or tablet, or view it in a PC browser and narrow the browser window. Either way, you’ll see that the sidebar moves below the page content.

    Okay, I visited your site on the mobile and it is displaying below the page content. Do you want to display it above the page content, right? Go to Customize > Blog > Single Post and select sidebar/content layout.
    For more customization like adding hamburger button, you need to consult with a developer.

    Thread Starter bryanhiggs

    (@bryanhiggs)

    Thanks. I tried that, but it didn’t work. The sidebar menu is still displaying after the content.

    Note that I’m using pages, not posts.

    Hello,

    Did you publish the settings after selecting sidebar/content layout? It is still displaying Content-sidebar in the source code.

    Thread Starter bryanhiggs

    (@bryanhiggs)

    I did publish the settings. When I go back into Customize > Blog > Single Post, under Mobile Sidebar Order, it shows “Sidebar / Content”.

    I don’t understand why changing this under Blog > Single Post would affect the behavior of a page. Which it apparently doesn’t.

    Can you please select this layout and let me know so that I can check it live on your website?

    Thread Starter bryanhiggs

    (@bryanhiggs)

    I don’t understand. I said that I had already selected this layout (“Sidebar / Content”) under Mobile Sidebar Order. You can see on the page https://play.uucm.org/about-us/beliefs-and-values/ that, when you narrow the browser window, it places the sidebar after the content. It appears that setting “Sidebar / Content” under Mobile Sidebar Order has no affect for this page (it’s not a post).

    It displays 404-page not found. Can you link to a valid page?

    Thread Starter bryanhiggs

    (@bryanhiggs)

    Sorry, I changed the permalink for other reasons. Try https://play.uucm.org/about-us/our-mission/

    Thanks

    Hello,

    Add the below code to the Customize > Custom CSS section and check it works or not. 

    @media only screen and (max-width: 959px) {
div#content-wrap {
    display: flex;
    flex-direction: column-reverse;    
}
aside#right-sidebar {
    margin-bottom: 15px;
}
}
    Thread Starter bryanhiggs

    (@bryanhiggs)

    Thank you. That caused the sidebar to be displayed first.

    I am confused about one thing: you styled aside#right-sidebar , but my sidebar is a left sidebar?

    aside#right-sidebar is the default sidebar. Left sidebar will appear when you will select both sidebar style.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Responsive sidebar?’ is closed to new replies.

Tags