CODEWITHSUNDEEP
csshtml
1110
1110

Reputation: 6829

Issue with fixed header - no horizontal scroll

I need to have header visible while user scroll page. I set header to be fixed position and it stays while scrolling but when I resize browser I don't get horizontal scroll bar so I can't see all items in navigation for example.

<body>    
        <header>
            <div id="topHeader">
                <p>test</p>
            </div>
                <nav>
                    ... navigation items ...
                </nav>            
        </header>
        <div id="content">
            @RenderBody()
        </div>    
</body>

css

#content{margin-top:80px;}
#topHeader{width: 100%; background: #262626; height: 40px;margin:0;}
header
{   
    width: 100%;
    position: fixed;
    top: 0;
}

Upvotes: 3

Views: 10313

Answers (5)

Chris B.
Chris B.

Reputation: 372

This worked for me to get the behaviour of the facebook header

<div id="headercontainer" style="position: fixed; width: 100%">
  <div id="actualheader" style="position: relative; width: 1000px; margin: 0 auto">
  </div>
</div>

with the following jquery:

<SCRIPT>
    $(window).scroll(function() {
    $('#actualheader').css('left', -$(this).scrollLeft() + "px");
    });
</SCRIPT>

Haven't tested for compatibility

Upvotes: 3

MarkMeikle
MarkMeikle

Reputation: 1

Not perfect, but this worked for me. I wrote this java function positionContentBelowHeader to increase the margin of the content table so that it shows up directly below the fixed header.

Set your fixed header to have no minimum width and it will squeeze really small when the window is shrunk. Then, call position content function in the body resize event. This way, at least nothing is cut off, and the content slides down to adjust for the taller, compacted fixed header.

In asp.net code behind, I also have to add this to run the position function on page render

'Save dynamic employee panel height into property using javascript.
Page.ClientScript.RegisterStartupScript(Me.GetType(), "positionContentBelowHeader", "positionContentBelowHeader();", True)

I place this in the body

id="objMasterPageBody" onresize="positionContentBelowHeader()";

>

           <script type="text/javascript">

               function positionContentBelowHeader() 
               {
                    //Set header height
                    var headerHeight = document.getElementById('<%= TableHeader.ClientID %>').clientHeight;
                    document.getElementById('<%= hidHeaderHeight.ClientID %>').value = headerHeight;            //margin: 0px auto 0px auto; height: 100%;
                    document.getElementById('<%= TableContent.ClientID %>').setAttribute("style", "height: 100%; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: " + headerHeight.toString() + "px");

               }

            </script>

Upvotes: 0

user1289347
user1289347

Reputation: 2407

You can't do this in html/css. Go to this site and shrink the browsesr window way down, the footer is fixed position and you lose the content on the right, but if you use the horizontal scrollbar it moves. I did this with jquery. Here is the code I used. Basically I am moving what is inside the fixed div in relation with the windows scroll location.

    if ($(window).width() < 990) {
    $('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
    $('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
  }
$(window).scroll(function() {
  if ($(window).width() < 990) {
    $('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
    $('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
  }
  else {
    $('#copyright').css({ 'left': '20px' });
    $('#click-to-call, #erving').css({ 'right': '20px' });
  }
});

});

Upvotes: 2

Richard Andrew Lee
Richard Andrew Lee

Reputation: 1177

Use min-width. and give older browser a different experience, Or you can write some js to tell the header not to ever get smaller then [number]. This solution should fix it for Modern Browsers.

header{   
    min-width:960px;
    width: 100%;
    position: fixed;
    top: 0;
}

Upvotes: 0

Matthew Darnell
Matthew Darnell

Reputation: 4588

You are setting the width to 100%, which means 100% of the viewport in this case. The element won't expand past that point, meaning no horizontal scrollbar.

You really shouldn't be fixing something to the viewport that doesn't fit inside of it. Consider adding some kind of arrows to pan around the navigation when it gets too large.

Upvotes: 0

Related Questions