Widget with fixed position in responsive layout

  • I’m working on a responsive theme based on Twenty Ten here: https://odin.reaktortest.no/hvorfor-velge-fixit/

    I’d like to get the beige box with contact form in the sidebar to stay fixed (meaning, it follows you as you scroll down the page). I know you can do this by applying position:fixed to the appropriate div, in this case #iwajax_contact_widget-2. When I try to do this though, the div gets re-sized.

    I suspect this might have to do with this being a responsive layout and that the values are defined in percentages, but I’m unable to find a solution for this online.

    Am I doing something wrong? Any insight or suggestions would be greatly appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter sarahjadesigns

    (@sarahjadesigns)

    After a bit more research and trial and error I’ve figured out the problem, but not the solution. Below is a better explanation of the problem.

    I’m working on a responsive layout and I would like a widget to remain fixed/sticky, meaning it’ll follow you as you scroll down the page.

    Simplified HTML:

    <div class="page">
    <div class="content"></div>
    <div class="sidebar">
        <div class="widget1"></div>
        <div class="widget2"></div>
    </div>
</div>

    CSS:

    .page {
    width:96%;
    max-width:1000px;
    margin:0 auto;
}
.content {
    width:65%;
}
.sidebar {
    width:28%;
    float:right;
}
.widget1 {
    position:fixed;
    padding:7.15%; /* 20px of 280px */
    z-index:10;
}

    The problem: widget1 gets taken out of the flow by adding position:fixed. This results in the padding percentage being calculated from the body and completely ruining my layout. Because it’s removed from the flow, it also no longer takes up 100% width of the sidebar.

    What I need: have widget1 (with a percentage of padding) fit the full width of sidebar.

    The closest solution I’ve found suggests to add width:inherit on the fixed element. This works great, but only if the parent’s width is set in pixels, not in percentage. It also doesn’t help with the fact that I need to add padding.

    Any insight or suggestions would be greatly appreciated. I’d prefer a CSS solution, but I’m not against using jQuery.

    If it helps, I’m working on a responsive theme based on Twenty Ten. The site is here: https://odin.reaktortest.no/hvorfor-velge-fixit/
    It’s the beige box I’d like to keep fixed (#iwajax_contact_widget-2).

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    To your first post (haven’t read your second sorry) this seems to work for me:

    @media screen and (min-width: 767px) {
 #primary {
  position: fixed;
  right: 0;
 }
}

    Edit: There’s an issue with it not quite overlapping the footer but you can resolve it by adding a z-index to ‘#primary‘.

    Thread Starter sarahjadesigns

    (@sarahjadesigns)

    Thanks for the response Andrew. While this solution helps with the positioning of the fixed sidebar, it doesn’t solve the problem of the sidebar or widget getting re-sized. The reason this happens is detailed in my 2nd post.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Widget with fixed position in responsive layout’ is closed to new replies.