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

    Header and Spry menu Fixed Position

    chateau21 Community Member

      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)

       

      http://www.vooberlin.com/browse/women/1

       

      Thankyou

        • 1. Re: Header and Spry menu Fixed Position
          bemdesign Community Member

          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 Community Member

            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?

             

            Thankyou

            • 3. Re: Header and Spry menu Fixed Position
              chateau21 Community Member

              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?

               

              Thankyou

              • 4. Re: Header and Spry menu Fixed Position
                Nancy O. CommunityMVP

                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 Community Member

                  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

                   

                  Thanks

                   

                  HTML:

                  <div id="header">

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

                  </div>

                  <div id="container">

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

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

                          <ul>

                            <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>

                          </ul>

                        </li>

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

                          <ul>

                            <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>

                          </ul>

                        </li>

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

                          <ul>

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

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

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

                          </ul>

                        </li>

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

                          <ul>

                            <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>

                          </ul>

                        </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>

                      </ul>

                  </div>

                  <p> </p>

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

                   

                  CSS:

                  #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;

                  }