CODEWITHSUNDEEP
htmlcss
Fatih Donmez
Fatih Donmez

Reputation: 4347

Fixed position header bar issue

I tried to implement fixed position header bar. But when I try to resize window to smaller width, right part of header is not shown.. If I changed position to absolute, problem is resolved but I'm losing the fixed effect of header bar..

#header {
position: fixed;
top: 0px;
display: block;
height:56px;
width: 100%;
padding-left: 0px;
background-color: #333333;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 99999;
}

here is the html;

<body>
  <div id="mask"></div>
  <div id="wrapper">
    <div id="header">
        <div id="center">
            <a id="logoWrapper" href="/makale"><div id="logo"></div></a>
            <div id="categoryWrapper">

                <ul>
                   <li>...</li>
                   <li>...</li>
                 </ul>

            </div>
            <div id="searchWrapper">
                <div id="search">
                    <input type="text" />
                    <a id="searchBt" href="#"><img src="/images/site/search.png"></a>
                </div>

            </div>
        </div>
    </div>
    <div id="content">...</div>
  </div>
 </body>

Here is the link http://sporapp.com/makale

Upvotes: 0

Views: 617

Answers (2)

Ace
Ace

Reputation: 1467

i had the same problem some time ago. look at my older post up there -> Make Fixed Header Scroll Horizontal

you can use jQuery or Javascript to reposition the div on the top of the page ( causes some laggy effect sometimes )

Upvotes: 1

immayankmodi
immayankmodi

Reputation: 8580

hie, i have fixed your problem. You must have to add min-width property of css for #header portion while working on resizing window.

CSS:

#wrapper
{
background-color: #F4F4F4;
display: block;
height: auto;
min-height:100%;
min-width:980px;
overflow:auto;
width: 100%;
}

#header 
{
backgroung-color: #333333;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
display: block;
height: 56px;
min-width: 1265px; // Here, if you want to adjust your min-width of header as per your need (for that you can use fire bug) else remains same
padding-left:0;
position: absolute;
top: 0;
z-index: 99999;
}

#header #center
{
margin: 0 auto;
width:980px;
}

Hope, it will helps you. Cheers. !! Mark it as answer if it will helps you so that other can fix their same problem. Thanks. !!

Upvotes: 0

Related Questions