[Support request] Full Height Sidebar

Home Forums Support [Support request] Full Height Sidebar

Home Forums Support Full Height Sidebar

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #671710
    Callum Staley

    Hi,
    I am wondering can you tell me how to make sure my sidebar (left) is always the same height as the website content.

    Thanks Callum

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #671967
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Looks like you marked this as resolved – I assume you got it working?

    Let me know 🙂

    #671982
    Callum Staley

    Sorry I didn’t mean to mark it as resolved as I haven’t found a solution yet

    Any help would be appreciated

    #672237
    Tom
    Lead Developer
    Lead Developer

    Any chance you can link me to your site? I’ll be able to give you some CSS 🙂

    #672350
    Callum Staley

    Thank you, the website is currently offline/coming soon page but if you visit the following ,ink you should get access to it. http://www.viking.co.im?bypass=test

    You will see in the css that I have added a media query that makes the sidebar goto the top of the page, overlapping the header.


    @media
    (min-width: 769px) {
    .one-container .inside-left-sidebar {
    margin-top: -200px
    }
    }

    Thanks Callum

    #672688
    Tom
    Lead Developer
    Lead Developer

    What if you do this instead?:

    @media (min-width: 769px) {
        #left-sidebar {
            margin-top: -200px;
            height: calc(100vh + 200px);
            background: #656565;
        }
    }
    #672694
    Callum Staley

    Unfortunately that doesn’t work. It add’s a little to the bottom of the sidebar but not enough

    #672875
    Tom
    Lead Developer
    Lead Developer

    Can we try this?: https://generatepress.com/forums/topic/full-height-sidebar-next-to-menu/#post-672688

    It’s actually full height on my Macbook, so if that doesn’t work I’ll have to check on my 4k screen in the office tomorrow morning.

    #673074
    Callum Staley

    Good Morning Tom,
    The original media query that you posted without the 200px is actually now working, it must have been cached on my laptop.

    However unfortunately it is making the sidebar too big. It is adding a lot of space below the content but above the footer. It won’t work by using the -200px as the sidebar will need to be different sizes on different pages depending on the amount of content

    Are you also able to tell me is it possible to change the sidebar image in the css so that I can change the image based on the screen size using a media query rather than just having one image the whole time?

    #673784
    Tom
    Lead Developer
    Lead Developer

    You can make sure the site footer loads on top of the sidebar with this CSS:

    .site-footer {
        z-index: 20;
        position: relative;
    }

    I’m not seeing a lot of extra space anywhere?

    Which image exactly? The one in the first widget?

    #674194
    Callum Staley

    That’s great thank you. Yes I would like to be bale to change the widget image and also the background image of the sidebar using css.

    #674506
    Tom
    Lead Developer
    Lead Developer

    A background image can be changed within a media query:

    @media (max-width: 768px) {
        .sidebar .widget {
            background-image: url(yoururl.com);
        }
    }

    A static image can’t. You’d need to add multiple static images and hide them based on media queries.

    #1007399
    Rodrigo

    Hi Tom,

    Could I use this CSS snippet for custom background images? I want to add a background images in specific pages.

    body.page-id-123 {
        background-image: url("image_url");
        background-position: left top;
        background-size: auto;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    #1007492
    David
    Staff
    Customer Support

    Hi there,

    yes, i made a quick edit to your CSS – to include the closing } and added the body tag to the class, which just makes it a bit more readable and little more specific.

    #1051085
    Rodrigo

    Hello,

    I’ve struggling trying to do this sidebar height right, with no results. The solution you provide here:

    #left-sidebar {
    height: calc(100vh + 200px);
    }

    it works for one page, but not for another. I need to implement full height sidebar in all internal pages, and it has to be the same size of content.

    Is there a way I could specify the height of sidebar 100% relative to the height of content?

    Here’s an image of how it looks the website today: https://imgur.com/SdLg0Ke

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