Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Arrow Static/fixed side navbar no longer fixed

    On this webpage you can see that the left hand navigation pane stays in place when the right side is scrolled.

    I don't know what I did to break it, but on a very similar site it no longer works like that, so the left hand navigation pane scrolls along with the main pane:

    http://www.ianstuart-bride.com/colle.../killer-queen/

    What has caused this?

    Thanks.

  • #2
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Hello Jason

    It looks to me as if you need to position your header as "fixed"

    Code:
    header[role="banner"] {
        width: 241px;
        padding-left: 15px;
        position: fixed;
    Hope it helps!

  • Users who have thanked Csenna for this post:

    jason404 (02-04-2014)

  • #3
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks a lot Csenna.

    I'm really confused to how that rule needed to be added, as I didn't change anything to do with that, although I had been editing that css file.

  • #4
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    1
    Thanked 2 Times in 2 Posts
    I have done a lot of editing in my css files before and accidentally deleted something I needed without even knowing i deleted it. The way that I solved your issue was through firefoxes "inspect element" feature. once your on the page you want to look at right click and hit "inspect element" once there look on the top left for an arrow saying "select element with mouse". This feature allows you to move your mouse over any element of the page and select it specifically. After you select the element like "header" i move to the right side and see what code is being used on that specific element. I noticed you didn't have a "position:fixed" so I clicked underneath the last bit of code for the header and typed it in manually. This is a way of troubleshooting your code without permanently editing it. It's is kind of confusing but I hope this helps!

  • Users who have thanked Csenna for this post:

    jason404 (02-04-2014)

  • #5
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Yeah, I actually do that, but I don't know CSS very well, so I asked here, as I don't know how to make things fixed like that.

    I am an IT consultant and not a front-end designer and was asked to change a few things on those websites.

    I'm going to have to make a diff comparison with an earlier git commit to see how on earth that rule got knocked out!

  • #6
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    8
    Thanks
    1
    Thanked 2 Times in 2 Posts
    I've deleted enough important code that when I start editing I usually copy and paste the ENTIRE CSS or HTML into a notepad as to always have the original code I started with.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 593 Times in 592 Posts
    And you should check every time you change the code that the page is still working correctly.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •