Streaming live at 10am (PST)

Page content stays behind sidebar menu

#1

I’ve been working on this website concept for a client. She loves the idea of the sidebar menu and animations. The problem I have is that the sections and all the content of the site falls behind the navigation menu and it’s very hard to adjust and looks just terrible specially when the screen is smaller because it adjust things literally behind the whole sidebar. I added a huge margin to compensate, but I believe that’s not the way to go.

I have another project with a sidebar like that (I took the idea from it) that uses the Template “Easy Times” and it all fit by the right side of the sidebar. It adjust and centers well. I have gone trough the elements side by side, comparing and checking the style to see if there is any difference, but I can’t find a way to do it. There must me something I’m missing. After a few dead ends I decided to ask for help.

(Please notice I’m using here just a simple layout and placeholder logo and text. )

Thanks for any help or advice.


Here is my site Read-Only: https://preview.webflow.com/preview/sidemenusite?utm_source=sidemenusite&preview=847d883851f57c206233dcdaa24fea10

Live website: http://sidemenusite.webflow.io/

0 Likes

#2

Hi @kaira18, the main issue for not having the rest of the body content roll under the sidebar menu is the fact that the rest of the page works on a page down layout rather than a left to right layout.

For example, when you click on the pink box where it says “Why Little Town…” you will see that the div block spans the width of the page.

You can fix this by adding in some left padding so the images and the rest of the content stay to the right of the menu pull out. Or you can use some IX that makes the whole page shift to the right.

The other thing would be to setup everything in CSS Grid to separate the left and right section layouts.

Hope that helps.

1 Like

#3

What do you mean by IX?

0 Likes

#4

Interactions!

It is what allows you to have the menu slide out from the left.

0 Likes

#5

Thank you! I will give it a try. Maybe the best solution is the most simple one. :slight_smile:

1 Like