[Resolved] Fixed Left sidebar – Vertical Navigation issues and more

Home Forums Support [Resolved] Fixed Left sidebar – Vertical Navigation issues and more

Home Forums Support Fixed Left sidebar – Vertical Navigation issues and more

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1123120
    Sri

    Hi Tom, David, Leo,

    Hope you had a Merry Christmas and a Happy New Decade now πŸ™‚

    I followed the previous articles on this like https://generatepress.com/forums/topic/fixed-left-vertical-navigation-layout-css-and-customizer-only/page/2/ but still unable to resolve the below issues I have:

    1. Home Page is not showing my fixed vertical navigation (Other Pages and Posts are showing the left side-bar) – I made sure the settings on each page are set to sidebar/content and on each post is set to sidebar/content/sidebar), I did this also in Customizer.
    2. The logo isn’t seen in the first position above left sidebar before the main menu begins
    3. I have Google ads just 2 only for Posts (not Pages) in the right sidebar and as soon as I added the custom CSS for left sidebar, both the widgets on right sidebar slid to the footer, please help resolve this, I still need them on the right sidebar in posts only (not pages)
    4. How do I control the size of the left sidebar please, based on the content I have, I want to set a fixed width so I have more real estate for my content and also the right sidebar
    5. I want center-aligned for the left sidebar
    6. I need the top bar and the secondary navigation also to be sticky please, let me know how to do it – both on mobile and on desktop/tablet. In the code, I set the sticky part only to the primary navigation menu.
    7. On the home page, if you scroll down to the footer, you will see the blue horizontal bar is having white space on the left, I believe it is due to left sidebar I added, it wasn’t there before. I need it to even out and also sticky only on desktop.

    Sorry for so many items, Thanks much.

    Regards,
    Sri

    #1123354
    David
    Staff
    Customer Support

    Hi there,

    Happy New Year to you too.
    Lets deal with one or two at a time:

    1. GP Sections can be used for full width layouts so Sidebars are disabled by default. This article explains how to enable them:
    https://docs.generatepress.com/article/allow-sidebars-sections/

    2. This CSS:

    .main-navigation.has-sticky-branding:not(.has-branding):not(.navigation-stick) .navigation-branding,
    .main-navigation .sticky-navigation-logo, .main-navigation.navigation-stick .site-logo:not(.mobile-header-logo) {
        display: block !important;
    }
    .navigation-branding img {
        height: auto !important;
        margin: auto !important;
    }

    3. I don’t see any pages with right sidebar and ad content. Can you link me to a page?

    4. In this CSS you added, i have commented the line you need to change to adjust the sidebar width:

    @media (min-width: 769px) {
      .site-header {
        display: none;
      }
    
      body {
        padding-left: 2%;
      }
    
      #left-sidebar {
        width: 25%; /* Change 25% to eg. 300px */ 
        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;
      }
    }
    #1124107
    Sri

    Thanks, David.

    1. Solved
    2. Solved
    3. Open –> On any Post, just scroll all the way down after comments, you will see an Advertisement and Recent Posts display that I put in the right sidebar widget but it is moving to the bottom. I need it on the right sidebar on desktop only.
    4. Solved
    5. Solved
    6. Open –> I need the top bar and the secondary navigation also to be sticky please, let me know how to do it – both on mobile and on desktop/tablet. In the code, I set the sticky part only to the primary navigation menu.
    7. Solved
    ============================================
    With the solution, I now have new issues below:
    8. Open –> On mobile, the logo is appearing twice due to sticky navigation logo turned ON. I think its catch 22 if I need a logo on the left sidebar, the code you provided uses the sticky logo. I need Mobile with the only logo appearing on it and Menu.
    9. Open –> Tablet Content view is not showing in full, please take a look :-(, it is not showing half of the content hidden to the left.

    Sorry for so many items, Thanks much.

    Regards,
    Sri

    #1124556
    David
    Staff
    Customer Support

    Yeah these designs create a lot of complications – tricky to ‘retro fit’ this type of thing.

    For 3 and 9 try making these amends to the CSS:

    @media (min-width: 769px) {
        .site-header {
            display: none;
        }
    
        body {
            padding-left: 300px;
            /* Set this to match #left-sidebar width */
        }
    
        #left-sidebar {
            width: 300px;
            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;
        }
    
        /* add this CSS to adjust width for right sidebar */
        .both-sidebars .content-area {
            width: 75%;
        }
    }
    #1125240
    Sri

    Hi David, Thank you.

    For 3, it did show up the right sidebar but it reduced the main content area in the center.
    For 9, Tablet view is still bad, half of the content on left is not seen.

    Other issues below are open too, sorry for the ask. Take your time, no rush, I removed all the code for now. I will add when it works. Thanks much.

    3. Open –> On any Post, just scroll all the way down after comments, you will see an Advertisement and Recent Posts display that I put in the right sidebar widget but it is moving to the bottom. I need it on the right sidebar on desktop only.
    6. Open –> I need the top bar and the secondary navigation also to be sticky please, let me know how to do it – both on mobile and on desktop/tablet. In the code, I set the sticky part only to the primary navigation menu.
    8. Open –> On mobile, the logo is appearing twice due to the sticky navigation logo turned ON. I think its catch 22 if I need a logo on the left sidebar, the code you provided uses the sticky logo. I need Mobile with the only logo appearing on it and Menu.
    9. Open –> Tablet Content view is not showing in full, please take a look :-(, it is not showing half of the content hidden to the left.

    Regards,
    Sri

    #1126254
    David
    Staff
    Customer Support

    Its really impossible for me to advise on the changes required without the site setup and CSS in place.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.