[Resolved] Fixed menu on left and content scrollable (GPP+Elementor)

[Joseph]

Hey there!

Got a question (maybe a noob question) but is the first time that im working with a left sidebar fixed menu and elementor. I was able to do this menu thanks to this topic https://generatepress.com/forums/topic/fixed-left-vertical-navigation-layout-css-and-customizer-only/?fref=gc. I would like to know if im able to do 2 things:

1.- Content of the pages scrollable like this http://mammothmedia.tv/blog/

2.- Work just in the space on green on this picture, because if i want to work “fullwidth” this one goes till tha back of the sidebar menu.

Thanks a lot, sorry for the broken english.
GREETINGS FROM CHILE!

[Leo]

Hi there,

Can you link us to the site?

It should be fixed already with the CSS Tom provided.

Thanks!

[Joseph]

Im working in local, let me move this to a website.

BUT, i was checking and the content it is scrollable so number 1 solved… but the content is behind the menu when i want to build.
https://www.useloom.com/share/52a8e7f5f675442db3c9ae31a6e72bb0

This is the code that im using

@media (min-width: 769px) {
  .site-header {
    display: none;
  }

  .gen-sidebar-nav {
    width: 20%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: 1;
    background-color: #1a2930;
    background-repeat: no-repeat;
    background-position: top center;
    border-style: hidden;
    border-top-width: 0px;
    border-top-style: solid;
    border-top-color: #1a2930;

  }

  .footer-widgets {
    padding-left: 20%;
  }

  .site-info {
    padding-left: 20%;
  }
}

[Tom]

Are you using an Elementor setting to force full width rows? If so, can you disable that and use the full width content option in the Page Builder Container meta box?

If that doesn’t work, it would be awesome if you could throw the site up on a staging server so I can take a closer look.

[Joseph]

Uploaded!!!

https://webbase.hazmeunapagina.cl/

[Tom]

Looks like your Elementor section is still set to force full width. That won’t work with this layout, as Elementor isn’t aware of the left sidebar element.

[Joseph]

Awesome… that kind of work but now i have another problem.

To be able to have a full section i have to eliminate the padding from the customize on GPP, but i have to use left padding to fit in the space that i have and is gonna be a problem in the mobile versions. Can you please give a look to this video

https://www.useloom.com/share/f1b908e8dc234a94880f38d17c02d0df

[Tom]

Have you tried using the Page Builder Container meta box?: https://docs.generatepress.com/article/page-builder-container/

[Joseph]

Page Builder Container FULL WIDTH + Elementor (Boxed section 1200 px) did the trick.

Thanks a lot!

[Tom]

You’re welcome 🙂

[Irene]

Hi! I just was looking for a solution of doing this http://mammothmedia.tv/blog/ with generate press pro and Elementor pro, but with the advices you have written up I can’t do it. Could you explain me how to do it step by step, i will appreciated a lot… my knowledge of CSS are basic.

Regards,

Irene

[David]

Hi Irene, you could test out the Navigator Site from the Site Library which includes an Elementor template or the Sider site which can be easily configured for Elementor:

https://generatepress.com/site-library/

Note – the Navigator Site has a bottom up mobile nav, which may not be to your liking but we can help you change that.

[Irene]

Hi, Thanks so much for the recommendation of the theme, is what I was looking for, but, I need to do some things, maybe you can help me:

-Change de version logo in some pages
-Menu nav up in tablet and mobile
-Add social icons down the menu

Thanks for your help in advance.

[David]

Hi there,

can you start a new topic please, where you can add a link to the site using the Site URL.

thanks

David

[Irene]

Done it!

[Author]

Posts