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

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

Home Forums Support Fixed left vertical navigation layout – CSS and Customizer only

  • This topic has 33 replies, 9 voices, and was last updated 5 years ago by David.
Viewing 15 posts - 16 through 30 (of 34 total)
  • Author
    Posts
  • #253322
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

    #351040
    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!

    #351204
    Leo
    Staff
    Customer Support

    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.

    #466779
    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%;
      }
    }
    #466816
    Tom
    Lead Developer
    Lead Developer

    Can you link me to your site?

    #466821
    heliotrope
    #467168
    Tom
    Lead Developer
    Lead Developer

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

    #467292
    heliotrope

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

    #467747
    Tom
    Lead Developer
    Lead Developer

    Strange, try adding this CSS:

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

    Wow !Perfect !!
    It works !
    Thanks a lot!!! πŸ™‚

    #467771
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

    #541866
    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.

    #542128
    James

    Hey heliotrope,

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

    #542737
    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.

    #543113
    Tom
    Lead Developer
    Lead Developer

    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;
      }
    }
Viewing 15 posts - 16 through 30 (of 34 total)
  • You must be logged in to reply to this topic.