CODEWITHSUNDEEP
htmlcsscss-positionmenubar
user3017110
user3017110

Reputation: 175

How can I make a fixed top menubar with a changing height in CSS?

I would like to have a fixed menubar at the top of my website. (which doesn't move when we scroll). My issue is that this menu bar can have a variable height (one or two (or more) levels depending of the number of items/screen size)

Because the top menu is fixed, I have to add a margin-top for my "real" content after that (or it will begin hidden under the menu), but as the menu height is variable, I can't set a margin-top.

So, is it possible to "force" the content not to be under/over my menubar ? How could I do this ? (I wish not to use javascript for this king of positioning)

Here is the code I am using to test a solution : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="en" />

    <style>
        body
        {
            margin: 0;
            padding: 0;
            color: #575757;
            font: normal 10pt Arial,Helvetica,sans-serif;
            background: #cdcdcd;
        }

        #page
        {
            margin-top: 0px;
            margin-bottom: 5px;
            width:100%;
            max-width:1500px;
            margin-left:auto;
            margin-right:auto;
        }

        #mainmenu
        {
            background:#b90014 repeat-x left top;
            position:fixed;
            /*height:28px;*/
            width:100%;
            z-index:100;
            left:0;
            background-image:linear-gradient(#b90014, #d00018);
        }

        #mainmenu p#lastUpdate
        {
            float:right;
            color:#ffffff;
            margin-top:5px;
            margin-right:10px;
            margin-bottom:0px;
            margin-left:5px;
        }

        #mainmenu ul
        {
            padding:6px 20px 5px 20px;
            margin:0px;
        }

        #mainmenu ul li
        {
            display: inline;
        }

        #mainmenu ul li a
        {
            color:#ffffff;
            background-color:transparent;
            font-size:12px;
            font-weight:bold;
            text-decoration:none;
            padding:8px 8px 4px;
        }

        #mainmenu ul li a:hover, #mainmenu ul li.active a
        {
            color: #d00018;
            background-color:#FFFFFF;
            text-decoration:none;
        }
    </style>

</head>

<body>

<div id="page">

    <div id="mainmenu">
        <p id="lastUpdate">Last Update : this date</p><ul id="yw0">
            <li><a href="/index.php?r=index">Accueil</a></li>
            <li><a href="/index.php?r=reports">Rapports</a></li>
            <li><a href="/index.php?r=nestedReport">Rapports personnalisés</a></li>
            <li class="active"><a href="/index.php?r=quickReport">Rapports instantannés</a></li>
        </ul>

    </div><!-- mainmenu -->

    <div id="content">
        <div id="contentbox">
            HELLO WORLD
        </div>
    </div><!-- content -->

</div><!-- page -->

</body>
</html>

Thank you !

Upvotes: 0

Views: 1079

Answers (2)

ShufflerShark
ShufflerShark

Reputation: 387

I don't think you can do this in just CSS as it's not able to able detect changes in the page like that. As stated below you could get somewhere near what you want using css padding but i would suspect it wont be exactly what you want. This is one of the things JavaScript is designed for. Id happily be proved wrong though

Upvotes: 1

DorianHuxley
DorianHuxley

Reputation: 662

I think what you are looking for are media queries:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

You can apply CSS styles depending on the size of the screen.

Upvotes: 3

Related Questions