5 Replies Latest reply on Sep 24, 2012 6:35 AM by chateau21

    Header and Spry menu Fixed Position


      Hello all


      I am hoping someone can help me.

      I am building a website and would like the header with logo and the spry menu to remain fixed when scrolling.

      I've attached an example website as to what I would like it to work (not the transparency - just how it remains static)





        • 1. Re: Header and Spry menu Fixed Position
          bemdesign Level 4

          Put your Spry menu in a parent container (like a div) and give that container the property of "position:fixed". Adjust CSS as neccessary.

          Also use "view source" in your web browser to see how they did it - it's actually a pretty good example to learn from.

          • 2. Re: Header and Spry menu Fixed Position
            chateau21 Level 1

            Hi there


            Thankyou for the reply and the help

            I have attempted this but I don't think it is correct.

            Could you tell me how to put the spry into the container?



            • 3. Re: Header and Spry menu Fixed Position
              chateau21 Level 1

              Hi again,


              ok I think I've made the spry work as it is remaining fixed, however I put position: fixed; into the header, and the spry jumps to the top of the page and the header with the logo goes beneath it.

              Also when I scroll, the content of the page goes in front of the spry, how can I make it go behind the spry?



              • 4. Re: Header and Spry menu Fixed Position
                Nancy OShea Adobe Community Professional & MVP

                Show us a link to your page, please.  The answers to almost all questions are contained in your code (CSS and HTML).



                Nancy O.

                • 5. Re: Header and Spry menu Fixed Position
                  chateau21 Level 1

                  Hi there,


                  Sorry for my late reply.


                  I cant put my site pages up yet, but I have posted the code below for the header and the spry.

                  The header with logo and homelink keeps going underneath the spry and the spry jumps to the top of the page, this has only happened when I addded position: fixed;


                  I hope you can help





                  <div id="header">

                    <div align="center"><a href="index.html" id="homeLink"></a></div>


                  <div id="container">

                      <ul id="MenuBar1" class="MenuBarHorizontal">

                        <li><a class="MenuBarItemSubmenu" href="../mall.html">MENS</a>


                            <li><a href="../mall.html">ALL</a></li>

                            <li><a href="../mouterwear.html">Outerwear</a></li>

                            <li><a href="../msweatsknitwear.html">Sweats + Knitwear</a></li>

                            <li><a href="../mtops.html">Tops</a></li>

                            <li><a href="../mshirts.html">Shirts</a></li>

                            <li><a href="../mdenim.html">Denim</a></li>

                            <li><a href="../mtrousers.html">Trousers</a></li>

                            <li><a href="../mshorts.html">Shorts</a></li>

                            <li><a href="../mfootwear.html">Footwear</a></li>

                            <li><a href="../maccessories.html">Accessories</a></li>



                        <li><a href="../womens.html" class="MenuBarItemSubmenu">WOMENS</a>


                            <li><a href="#">ALL</a></li>

                            <li><a href="#">Outerwear</a></li>

                            <li><a href="#">Sweats + Knitwear</a></li>

                            <li><a href="#">Tops</a></li>

                            <li><a href="#">Shirts</a></li>

                            <li><a href="#">Dresses</a></li>

                            <li><a href="#">Playsuits + Jumpsuits</a></li>

                            <li><a href="#">Skirts</a></li>

                            <li><a href="#">Denim</a></li>

                            <li><a href="#">Trousers</a></li>

                            <li><a href="#">Shorts</a></li>

                            <li><a href="#">Footwear</a></li>

                            <li><a href="#">Accessories</a></li>



                        <li><a class="MenuBarItemSubmenu" href="../footwear.html">FOOTWEAR</a>


                            <li><a href="#">Mens</a> </li>

                            <li><a href="#">Womens</a></li>

                            <li><a href="#">Unisex</a></li>



                        <li><a href="../accessories.html" class="MenuBarItemSubmenu">ACCESSORIES</a>


                            <li><a href="#">ALL</a></li>

                            <li><a href="#">Bags</a></li>

                            <li><a href="#">Wallets + Purses</a></li>

                            <li><a href="#">Belts</a></li>

                            <li><a href="#">Hats</a></li>

                            <li><a href="#">Scarves</a></li>

                            <li><a href="#">Sunglasses + Glasses</a></li>

                            <li><a href="#">Watches</a></li>

                  <li><a href="#">Jewellery</a></li>

                  <li><a href="../maccessories.html">Mens</a></li>

                  <li><a href="#">Womens</a></li>



                        <li><a href="../about.html">ABOUT</a></li>

                        <li><a href="../blog.html">BLOG</a></li>

                        <li><a href="../contact.html">CONTACT</a></li>



                  <p> </p>

                  <div id="content"><!-- TemplateBeginEditable name="content" -->content<!-- TemplateEndEditable --></div>



                  #header {

                            background-color: #FFF;

                            background-image: url(LOGO/CHAIN%20logo%20new%2024.png);

                            background-repeat: no-repeat;

                            background-position: center center;

                            height: 200px;

                            width: 100%;

                            position: fixed;


                  #container {

                            height: 60px;

                            width: 100%;

                            margin-right: auto;

                            margin-left: auto;

                            position: fixed;


                  #homeLink {

                            width: 100%; /* set width to width of background image */

                            height: 200px; /* set height to height of background image */

                            display: block;

                            position: fixed;