We announce the release of NewsCard Pro with lots of features. View beautifuldemos

Make Sidebar Fixed

Tagged: 

This topic contains 4 replies, has 4 voices, and was last updated by  Rufando 1 week, 1 day ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #63674

    harrysumner
    Participant

    Hi, I have been using the theme for a few months and I am a big fan. While viewing the website on laptops and computer monitors, I want to make the left side bar area (Including logo area and menus) stay in a fixed position when scrolling up and down. Do you have any css tips to help me achieve this please?

    Thanks

    https://www.sonospace.org/

    #63915

    bkkumaris4u
    Blocked

    Recently, I was pleased to discover that all major desktop browsers (Chrome, Firefox, Edge and Safari) are now compatible with the CSS property: sticky. (Apart from an error in Chrome with some elements of the table). Edge was the last browser to send support in October 2017 in version 16, which can be found at caniuse.com. This means that we can build a sticky sidebar using only two lines of CSS, without JavaScript. Let me show you how.

    First set up two divs. One represents the content of the main page and should extend beyond the bottom of the screen. The second will be the sidebar, which we will shorten compared to the length of the screen, so that we can see it clearly move in our example. We use flex to place them next to each other, because it is in 2018 and also because I love flex.

    Use the following HTML and CSS code:

    <div class = “wrapper”>
    <div class = “main”>
    Main content
    </ div>
    <div class = “sidebar”>
    Sticky side bar
    </ div>
    </ div>
    wrapping {
    screen: bending;
    justify content: intermediate space;
    }

    .principal,
    . sidebar {
    edge: black 3px;
    Filling: 15px;
    background color: #fff;
    }

    .principal {
    width: 60%;
    height: 150vh;
    }

    . sidebar {
    width: 25%;
    height: 25vh;
    }

    body {
    background color: #ccc;
    Font family: sans-serif;
    Upholstery: 10px;
    }

    #64001

    harrysumner
    Participant

    Thanks 🙂

    #64060

    Hi there,

    For to fixed the position sidebar when scrolling up and down. It needs code customization, you need to hire a developer as this is a new feature to add in the theme.

    Thank you!

    #64486

    Rufando
    Participant

    Another solution is to install WP Sticky Sidebar plugin

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.