Position:fixed causes widget to disappear.

  • devibbrooks · Member ·

    Hi,

    I am using the Bloggy theme, and I want to make two separate sidebar widgets in a fixed position so they follow when someone is scrolling down. I’ve tried position: fixed, but every time I do the widget disappears. I’ve tried messing with the margin, lowering and raising the z-index, nothing’s working. It disappears until I erase fixed positioning from CSS.

    Help?

    The blog I need help with is ramblingsofanartist.com.

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    It is going to be difficult to flx the position of only two widgets since they are going to ride up and above your other widgets and block them at times.

    Which widgets are you wanting to fix the position on?

  • thesacredpath · Member ·

    The other issue with doing this is there is not an overall container div for all page items and on a responsive designed theme such as Bloggy, that means that on narrower screen/window sizes the content may be obscured by the widgets.

  • devibbrooks · Member ·

    Recent Posts and Email Subscriptions :)

  • thesacredpath · Member ·

    First off, the code below should be put at the very end of your CSS and it works with a browser window width of 960px or wider using a media query, which is where the sidebar moves down below the content. At 959px and narrower, it reverts back to the original design.

    Also, take a look at this screenshot of a maximized browser window at 1280px x 800px (your monitor with the browser window maximized): https://cldup.com/_bxn2HCap4-2000×2000.png Notice that the lower widget is only partially visible and therefore not usable. You could push them up further under the menu, but on a 1024 x 768 monitor, you would still have issues, and from an aesthetic and user experience perspective, I don’t think it works. Take a look and see what you think.

    @media screen and (min-width: 960px) {
#blog_subscription-10 {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
    position: fixed;
    top: 200px;
    width: 250px;
}
#text-26 {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
    position: fixed;
    top: 500px;
    width: 250px;
}
}
  • devibbrooks · Member ·

    Ah I see what you mean. Okay then, I’ll give up on that idea. Thank you so much for your help!

  • thesacredpath · Member ·

    You are welcome.

  • hallluke · Member ·

    You could try restyling the widget completely and moving it to the very bottom of the screen (again, just for larger screen sizes):

    @media screen and (min-width: 960px) {
    #blog_subscription-10 {
    position:fixed;
    bottom:0;
    left:0;
    background-color:rgba(87,218,174,0.7);
    margin:0;
    padding:5px;
    border-top: 1px dashed #ccc;
    z-index:22;
  }

  #blog_subscription-10 p,
  #blog_subscription-10 h3,
  #blog_subscription-10 form {
    display:inline-block;
    padding-left:10px;
    margin:0;
    padding:0;
  }

  #blog_subscription-10 input {
    position:relative;
    top:-2px;
    left:5px;
  }

  #blog_subscription-10 h3 {
    font-size:1em;
    padding-right:5px;
  }

  .footer {
    border:none;
    padding-bottom:0;
    margin-bottom:16px;
  }

}
  • devibbrooks · Member ·

    This worked marvelously. Thank you so much!

  • thesacredpath · Member ·

    Hooray for @hallluke! I should have thought of that. :)

  • hallluke · Member ·

    I’ve just noticed you mentioned the recent posts as well as the subscribe bit. Here’s a slightly less water-tight way to move it to the left side of your page. A few important issues: old browsers won’t like this and slightly-less-old browsers might mess up the sideways widget title, try it out and see though!

    #text-26 {
  transition:left 0.5s ease;
  position:fixed;
  top:50px;
  left:-115px;
  background-color:rgba(255,255,255,0.7);
  z-index;33;
  width:150px;
  padding-right:30px;
  border:1px dashed #ccc;
  border-left:none;
}

#text-26:hover {
  left:0;
}

#text-26 h3 {
  margin:0;
  position:absolute;
  top:50%;
  right:-50%;
  width:165px;
  -webkit-transform: rotate(270deg);
  -moz-transform:    rotate(270deg);
  -ms-transform:     rotate(270deg);
  -o-transform:      rotate(270deg);
}

    I worry that my enthusiasm has got the better of me with this example so I’d advise doing some rigorous testing for this (if you know that your visitors are likely to be using up-to-date browsers then you might be OK!). If you don’t end up using it I hope it at least gives you some ideas.

  • hallluke · Member ·

    You’ll want to copy that code inside the same @media block as the first example so it looks a little bit like this (I thought I’d copied those bits too but evidently not, sorry):

    @media screen and (min-width: 960px) {
  SUBSCRIPTION_CODE (example 1)
  ...
  RECENT_POSTS_CODE (example 2)
  ...
}
  • The topic ‘Position:fixed causes widget to disappear.’ is closed to new replies.