Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member
    Join Date
    Aug 2013
    Posts
    2
    Member #
    36942

    Exclamation Centre sticky menu?

    Not quite sure what section to ask this question but I found a piece of code using script with css that allows me to have a menu which sticks to the top of the screen when you scroll down.

    At the moment its alligned left and I want it centred under my title and to stay centred when you scroll down.

    I've tried changing a few values and using padding but its creating problems and I figured there must be a easier to do it that I'm probly missing.

    thank you

    Script

    Code:
    <script>
      $(function() {
     
        // grab the initial top offset of the navigation
        var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
         
        // our function that decides weather the navigation bar should have "fixed" css position or not.
        var sticky_navigation = function(){
            var scroll_top = $(window).scrollTop(); // our current vertical position from the top
             
            // if we've scrolled more than the navigation, change its position to fixed to stick to top,
            // otherwise change it back to relative
            if (scroll_top > sticky_navigation_offset_top) {
                $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
         } else {
                $('#sticky_navigation').css({ 'position': 'relative' });
            }  
        };
         
        // run our function on load
        sticky_navigation();
         
        // and run it again every time you scroll
        $(window).scroll(function() {
             sticky_navigation();
        });
     
    });  
       </script>
    HTML


    HTML Code:
    <div id="demo_top_wrapper">
     
        <!-- a header with a logo just to have some content before the menu -->
        
     
        <!-- this will be our navigation menu -->
        <div id="sticky_navigation_wrapper">
            <div id="sticky_navigation">
                <div class="demo_container">
                    <ul>
                        <li><a href="#">About Me</a></li>
                        <li><a href="#">My Work</a></li>
                        <li><a href="#">Experience</a></li>
                        <li><a href="#">Contact Me</a></li>
           
                    </ul>
                </div>
            </div>
        </div>
     
    </div><!-- #demo_top_wrapper -->

    CSS


    Code:
    .demo_container { width:980px; margin:0 auto;padding-left:0 auto; }
    #demo_top_wrapper { margin:0 0 20px 0; }
    #demo_top { height:100px; padding:20px 0 0 0; }
    #my_logo { font:70px Georgia, serif; }
     
    /* our menu styles */
    #sticky_navigation_wrapper { width:100%; height:50px; }
    #sticky_navigation { width:100%; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;float:centre }
    #sticky_navigation ul { list-style:none; margin:0; padding:5px; }
    #sticky_navigation ul li { margin:0; padding:0; display:inline; }
    #sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:28 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com