[Resolved] Fixed left vertical navigation layout – CSS and Customizer only

[Tom]

You’re welcome 🙂

[Michael]

Hi there,

I am using the latest version of GP Premium and can’t find the navigation logo option in the customizer.

Does this still apply for getting the logo to appear at the top of this sidebar menu?

Thanks!

[Leo]

Hi there,

The option should be in Customizer > Layout > Primary Navigation: https://docs.generatepress.com/article/navigation-logo/

Make sure the menu plus add-on is activated: https://docs.generatepress.com/article/installing-gp-premium/#activate-your-add-ons

Then if you set the navigation location to the left sidebar and navigation logo to Sticky + Static then it should work.

[heliotrope]

Hello,
One more thing about the left navigation : The logo is not centered in the column , it is stuck on the left.
Any idea how to center the logo?
We followed the steps provided by Tom to upload the logo and we used the following css provided by Tom also:

@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: 65px;
    border-top-style: solid;
    border-top-color: #1a2930;

  }

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

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

[Tom]

Can you link me to your site?

[heliotrope]

Here it is :
http://www.mayelle.com/wpressmayelle

[Tom]

Have you tried setting your navigation alignment to center in Customize > Layout > Primary Navigation?

[heliotrope]

Yes Tom,
“Primary Navigation” is actually set to ” center”

[Tom]

Strange, try adding this CSS:

.sidebar .main-navigation {
    text-align: center;
}

[heliotrope]

Wow !Perfect !!
It works !
Thanks a lot!!! 🙂

[Tom]

You’re welcome 🙂

[heliotrope]

Hello Tom,
We are still on the same project with left navigation .
We now would like to increase the width of the left column from 20% to 25% .
Problem is that when we set “.gen-sidebar-nav” to 25% width , the content area is cropped.
Any solution?
Maybe this other problem is linked : the content is not centered in the content area
Example : http://www.mayelle.com/wpressmayelle/?page_id=1054
Thanks in advance.

[James]

Hey heliotrope,

did you change the sidebar width in the customizer? the settings for the sidebar and the css must match in percentage.

[heliotrope]

Hi James,
Thanks for the answer .
The sidebar width parameter in the customizer seems to have no effect on the left vertical menu nav .
It has effect on the left and right sidebar.

[Tom]

We actually released a Site in our new Site Library with a fixed header on the left: https://gpsites.co/sider/

Might be good for people to start using that when creating new sites in the future.

For your site, since we don’t want you to start over, try adjusting your CSS to this:

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

  body {
    padding-left: 25%;
  }

  #left-sidebar {
    width: 25%; 
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: 1;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: top center;
    border-style: hidden;
    border-top-width: 65px;
    border-top-style: solid;
    border-top-color: #ffffff;

  }

  .content-area {
    width: 100%;
    left: auto;
  }
}

[Author]

Posts