#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0

    Buttons on a "sticky menu" stop working when I scroll down


    hi.

    sorry for the bad title. I didnīt know what else to call it.

    the thing is that I created a website, where the code looked really awful so I thought that I should clean it up.


    so..

    ...I redid all of the code from scratch and the result looked really nice...
    ...but Then I noticed a strange issue with the menu on the website.

    the buttons on it only seemed to work as long as I remained on the top of the website (itīs a parallax scrolling website).

    This is what I mean.

    Iīm on the top of the website and I click on a button. The page that I chose to go to appears as it should, but the menu for some reason jumps to the left side of the screen, instead of staying across the it.

    Not only that... the buttons on the menu stop working. They only work when I scroll back up to the top of the page. Then of course the menu is back across the screen.


    I have checked my CSS file but I cannot find the issue.

    Can anyone help me to solve this?

    ps. I wanted to upload the cod efile but I donīt know how to do it
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    Post the code here and use the code tags so we can help you
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0
    stylesheet.css

    Code:
    *
    {
        margin: 0;
        padding: 0;
    }
    body
    {
        font-size: 14px;
        color: #6a6272;
        font-family: Tahoma;
        background: #B0CEFF;
    }
    .container
    {
        width: 0 auto;
        margin: 0 auto;
        text-align: center;
        background-color: #B0CEFF;
    }
    .header
    {
    	
        padding: 5px 0px 5px 0px;
        font-size: 60px;
        color: #666666;
        background-color: #528CE0;
    }
    .sticky-navigation
    {
        padding: 10px;
        background: #528CE0;
        color: #FFFFFF;
        font-size: 18px;
        width: 0 auto;
        text-transform: uppercase;
        text-align: right;
    }
    .sticky-navigation.stuck
    {
       	position: fixed;
        top: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    }
    .sticky-navigation ul
    {
        border-style: solid;
        border-width: 1px 0px 1px 0px;
        border-color: #FFFFFF;
        padding: 5px;
        list-style-type: none;    
    }
    .sticky-navigation ul li
    {
        display: inline;
        padding: 10px;
    }
    .sticky-navigation a
    {
        padding: 5px;
        color: #FFFFFF;
        text-decoration: none;
    }
    
    .footer
    {
    	width:0 auto;
        padding: 50px 0px 50px 0px;
        font-size: 16px;
        color: #FFFFFF;
        text-align:justify;
        background-color: #528CE0;
    }
    
    #home { 
    	text-align: left;
    	height: 1000px;  
    	margin: 0 auto; 
        width: 100%; 
        max-width: 1920px; 
        position: relative; 
    }
    
    #apps { 
    	text-align: left; 
    	height: 1000px;  
    	margin: 0 auto; 
        width: 100%; 
        max-width: 1920px; 
        position: relative; 
    }
    
    #about { 
    	text-align: left;
    	height: 1000px;
    	margin: 0 auto; 
        width: 100%; 
        max-width: 1920px; 
        position: relative; 
    }
    
    #contact{ 
    	text-align: left;
    	height: 1000px;
    	margin: 0 auto; 
        width: 100%; 
        max-width: 1920px; 
        position: relative; 
    }
    default.html
    Code:
    <!DOCTYPE html>
    <html>
    <head>
     
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
        <script src="jquery.min.js"></script>
        <script src="waypoints.js"></script>
        <script src="waypoints-sticky.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.sticky-navigation').waypoint('sticky');
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="header">
            	
                </div>
            <div class="sticky-navigation">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#apps">Apps</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
           
              <!-- Section #1 -->
    <section id="home" data-speed="10" data-type="background">
      <article>Home</article>
    </section>
    
      <!-- Section #2 -->
    <section id="apps" data-speed="10" data-type="background">
      <article>Apps</article>
    </section>
    
    	<!-- Section #3 -->
    <section id="about" data-speed="10" data-type="background">
      <article>About</article>
    </section>
    
    	<!-- Section #4 -->
    <section id="contact" data-speed="10" data-type="background">
      <article>Contact</article>
    </section>
    
            <div class="footer">
               This Site is Powered by
            </div>
        </div>
    
    
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo