Sidebar menu issues

Hi, it has something to do with Elementor and the setup on pages. For some reason, the content area set within Elementor is overlapping the sidebar which is not allowing the links to be clicked. See the images below, the first one is on the homepage and notice how the blue highlighted section isn’t overlapping the sidebar area

https://i.snipboard.io/P7KqGy.jpg

However, on a page, the screenshot look like this

https://i.snipboard.io/ckbFzV.jpg

You can see how the blue highlight overlaps the sidebar. So you would need to adjust the width of the content area in Elementor on page templates to not span the full width and cover the sidebar.

Hi,

@jarretc – thanks for your response.

It seems the page issue with Elementor is fixed.
I do also notice the footer width is not properly set, you’ve added a custom width of 74% but the content div above has a smaller width.

To “freeze” the sidebar is a bit of tricky because I’m using % for each element.
For that it’s better to change that into px, example:

#sidebar {width:auto; max-width:250px; position:fixed;}

But px is not so good for mobile device..

Guido

Thank you very much for those info. Indeed I was able to sort the elementor issue fairly quickly. It was a margin issue.
I have not attempted the sidebar and footer yet.
The sidebar menu doesn’t look right on mobile phones though. Would that be a theme or an elementor issue?

Hi,

This is caused because of the custom sidebar width you’ve added. It now also applies to the mobile stylesheet. Solve this by adding this CSS for mobile stylesheet:

/* MOBILE */
@media screen and (max-width:767px) {  
  #sidebar {width:100%;}
}

Guido

Thank you so much for all your help