Sidebar not working on "Layout-Sidebar left, content right"

[psft]

Hi team!

I need your kind help with this issue. I’m trying to set a sidebar menu. I have created the sidebar and the widget with the menu. Also, I have set the layout of the page as “Sidebar left, content right”.

My idea is to achieve something like this, but with a Menu instead of the Einstein picture: http://www.psft.eu/education/

Might be an error in my configuration because for some reason I get this result: https://www.clon2.psft.eu/research/smart-project/

Inexplicably it shows the title of the page in light grey and its featured image, but it does not allow me to set the sidebar with the menu widget.

I would really appreciate your help!
Cheers

[prakash_s]

Hello Pamela,

Thanks for writing to us.

I checked your website it seems that you have override the CSS by your custom CSS code
Your sidebar is randing on your website but it not getting proper width to align properly. It is getting 0% width in the CSS style.

Screenshot

You content section is getting the width of 100% because of that It is not aligning as you want. Please check your custom CSS code and remove it to get rid of this issue.

Thanks

[psft]

Many thanks, PrakashS.

Where exactly can I find this CSS line?. I find it neither in Global CSS nor Additional CSS.

However, I’ve been testing it in the navigator Inspector, and I realized that changing sidebar width to 100% does not fix the problem. As you can see in the screenshot, the menu is still at the bottom and not at the side:

Many thanks.

[prakash_s]

Hello Pamela,

You can find the custom CSS code under X-->Theme Options --->CSS
Please have a look at the given screenshot

Or if you have added this style in page CSS then go page and edit the page , find the CSS Option

If you set sidebar width as 100% it would not align side by side, It would always display under the content area section since your content section’s width is set 100%.

To align sidebar and content area section side by side Your style needs to be like this

.x-main {
width: 72%;
}

.x-sidebar {
    width: 28%;
}

As I had mentioned in your case, your site style rendering like this

.x-main {
    width: 100%;
}
.x-sidebar {
width: 0%;
}

Please check your custom CSS code and remove this style.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[psft]

Many thanks, Prankahs.
I think now it’s look OK.

However, when I set my page as “Sidebar left, content right”, the featured image is shown at the top. Also, you can see the title of the page over the menu (please, check the screenshot). How can I remove them?

Thanks!

[christian]

Hey Pamela,

It looks like you have found the solution to your issue. I see this:

I see that you have set the column to act as your sidebar and that is correct. That is the only way to customize a page layout for now.

I’ll just add that in the near future, you’ll be able to create your own templates for single and archive pages. What will enable this is called the Layout Builder. You can learn more from our Status Reports here https://theme.co/content

Hope that helps.

[psft]

Hi Christian, thanks for your kind help.

This page that you found is another page wich layout is “Blank-no container/header, footer”, and I’m using the “Navigation Collapse” element as a sidebar menu. My problem is that I want an static menu, always visible even when I scroll down. And I can not find a way to make fix a cornerstone column, because when I immobilize the column fixed, it overlaps with the content of its next column (please check screenshot).

That’s the reason why I’been tring to create the sidebarmenu “Sidebar left, content right” in another page.

Honestly, I don’t know which of the two options is the best to achieve a fixed vertical sidebar menu.

[ruenel]

Hello Pamela,

Thank you for the clarification. I will get back to your first question which is this:

However, when I set my page as “Sidebar left, content right”, the featured image is shown at the top. 
Also, you can see the title of the page over the menu (please, check the screenshot). How can I remove them?

Since your Fixed Widget Menu is already in place, please make use of the Sidebar Left, Content Right page template instead. And then to remove the feature image, you can just simply unassign any featured image on the page. As for the page title, you may disable it as well so that it will not display. You can find the " Disable Page Title" option in the Page settings.

Hope this makes sense.

[psft]

Hello Ruenel,
Many thanks for your help.
Thanks to your advice I have managed to remove the title of the page. But I can’t do it the same with the Featured Image, because I’m using it for the Essential Grid.

If I decide to keep the page with the Collapse menu built with cornerstone (Check security note, please). There is any chance to immobilize the left column as is shown in the screenshot?

[tristup]

Hi Pamela,

Regretfully, there is no such option to fix a column or sidebar, to implement that, would require customization and which is beyond the scope of theme support.
I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

Thanks