CODEWITHSUNDEEP
htmlcssheader
tonix
tonix

Reputation: 6939

How to make a fixed HTML header scroll horizontally with CSS?

I have found this html code for making a HTML fixed header:

<!DOCTYPE HTML>
<html lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html"/>
    <meta charset="utf-8"/>
    <title>NavBar</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="navigation">
    <div class="center">
        <div class="logo">
        <h1>Logo</h1>
    </div>
    <ul class="right">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Our Apps</a></bli>
        <li><a href="#">Support</a></li>
        <li><a href="#">Press</a></li>
        <li><a href="#">About</a></li>
    </ul>
    </div>
</div>
<div id="content">
    <hgroup>
        <h1>Hello</h1>
        <h2>Hello again</h2>
        <h3>And Again!</h3>
    </hgroup>
    <article>
        <section>
            <p>Testo Testo Testo Testo Testo Testo Testo Testo Testo     Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo </p>
        </section>
                    <section>
            <p>Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo </p>
        </section>
                        <section>
            <p>Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo </p>
        </section>          <section>
            <p>Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo </p>
        </section>
    </article>
</div>
    </body>
   </html>

This is the style.css file:

        body {
            padding:0;
            margin:0;
            font-family: Helvetica, Arial, sans-serif;
            font-size:12px;
    }
    #navigation {
            position:fixed;
            display:block;
            top: 0;
            width: 100%;
            height:35px;
            padding-top: 15px;
            -webkit-box-shadow: 0px 0px 8px 0px #000000;
            background-color: rgba(1,1,1,0.8);
            color:rgba(1,1,1,0.8);
            border-bottom:1px solid black;
    }

    .center {width: 1000px; margin: 0 auto;}

    div.logo {display:inline-block;

                     }

    .logo h1 {
            display:inline-block;
            margin:0;
            padding:0;
        color:white;
    }

    ul, li {
            padding:0;
            margin:0;
    }
    #navigation ul {
            list-style: none;
            float:right;
    }
    #navigation ul li {
            display:inline;
    }

    #navigation a {
            font-size:14px;
            padding: 0 15px;
            color:white;
            text-decoration:none;
    }

    #navigation a:hover {
            color:grey;
    }
    #content {
            width:800px;
            margin: 0 auto;
            margin-top:80px;
    }

The problem is that when I zoom-in the page, I only see the element with the "Logo" text, and I cannot scroll horizontally to see the links of the header while scrolling. Just try this code and you'll know what I mean. How can I make the fixed header scroll horizontally?

Upvotes: 0

Views: 6427

Answers (3)

Ria Weyprecht
Ria Weyprecht

Reputation: 1275

Fixed elements usually don't scroll, they are just not made for it as they are completely out of context for the whole site. I would think about using position: absolute instead.

http://jsfiddle.net/FQ4LC/8/

Upvotes: 1

kalamar
kalamar

Reputation: 953

Change

.center {width: 1000px; margin: 0 auto;}

into

.center {margin: 0 auto;}

Edit: With this solution the header won't scroll but the links won't disappear.

Edit 2: JavaScript (jQuery) solution:

$(document).ready(function () {

    $(window).resize(function () {
        $("#navigation .center").css("maxWidth", $(window).width());
    });
});

Upvotes: 0

rohit12sh
rohit12sh

Reputation: 847

Try setting up this property in CSS that is hosting all of the content that you want to make scroll. 'overflow-X: scroll',

Upvotes: 0

Related Questions