Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Nav Bar on top issue

    Hey in this website when you scroll down the navbar is supposed to stay ontop and go back into place when you scroll up
    Link
    But the problem is the border on the navbar extends to the right when scrolling but does not extend to the left.
    I can’t find a way of getting it to extend to the left as well.
    This is the Style CSS – Full CSS can be found on the link source code above
    Code:
    @charset "utf-8";
    		
    		1)  HEADER & NAV
    		2)  SLIDER
    		3)  CONTENT
    			a) COMMENTS
    			B)/> PAGER
    			c) ELEMENTS
    			
    		4)  SIDEBAR
    			a) TWITTER
    			B)/> FLICKR
    			
    		5)  FOOTER
    
    /**************************************************/
    body{
    	background:#CCC url(../img/bg.jpg) no-repeat fixed center top;
    	background-size:cover;
    }
    .body-wrapper{
    	width:100%;
    	margin:0;
    	padding:0;
    	float:left;
    	z-index:9999;
    	position:relative;
    	height:auto;
    	min-height:100%;
    }
    .controller{
    	width:100%;
    	margin:0 auto;
    	min-height:100%;
    }
    .controller2{
    	width:100%;
    	float:left;
    	background:#FFF;
    	min-height:100%;
    }
    
    /*------------------------------------------------------------------*/ 
    /*	1) HEADER & NAV
    /*------------------------------------------------------------------*/
    #header{
    	height:auto;
    	width:100%;
    	float:left;
    	position:relative;
    	margin-bottom:20px;
    }
    .logo{
    	float:left;
    	width:auto;
    	height:auto;
    	margin:35px 0 20px 0;
    }
    .search{
    	background:#fafafa;
    	width:230px;
    	float:right;
    	margin-top:30px;
    }
    .search .ft{
    	background:none;
    	padding:5px;
    	margin:4px 0 0 10px;
    	width:150px;
    	color:#898989;
    }
    .search .fs{
    	background:#ea4748 url(../img/search.png) no-repeat center;
    	border:none;
    	margin:0;
    	height:34px;
    	width:43px;
    	float:right;
    }
    
    nav#nav{
    	float:left;
            z-index:99999;
    	background:#FFFFFF;
    	clear:both;
    	border-bottom:2px solid #ea4748;
    	border-top:20px solid #FFFFFF;
    	width:100%;
    	margin-top:0px;
    }
    .sf-menu{
    	list-style-type:none;
    	clear:both;
    	margin:0;
    	padding:0;
    }
    .sf-menu>li{
    	float:left;
    	margin-right:30px;
    }
    .sf-menu>li>a{
    	padding:0 0 7px 0;
    	display:block;
    	position:relative;
    }
    .sf-menu li a{
    	color:#696969;
    	font-family: 'Merriweather Sans', Arial, sans-serif;
    	font-size:13px;
    	font-weight:bold;
    	text-transform:uppercase;
    }
    .sf-menu li a:hover{
    	color:#696969;
    }
    .sf-menu>li>a{
    	border-bottom:3px solid #FFF;
    }
    .sf-menu>li>a:hover{
    	border-bottom:3px solid #ea4748;
    	text-decoration:none;
    }
    .sf-menu li.current>a{
    	color:#696969;
    	text-decoration:none;
    	border-bottom:3px solid #ea4748;
    }
    .device-menu{
    	display:none;
    	width:100%;
    	border:1px solid #CCC;
    	padding:5px;
    	margin-bottom:10px;
    	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
    	box-sizing: border-box;         /* Opera/IE 8+
    }
    Heres the javascript code for the navbar on top effect when scrolling
    Code:
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    
    <script>
    
    $(function() {
             
        // get initial top offset of navigation 
        var floating_navigation_offset_top = $('#nav').offset().top;
                 
        // define the floating navigation function
        var floating_navigation = function(){
                    // current vertical position from the top
            var scroll_top = $(window).scrollTop(); 
             
            // if scrolled more than the navigation, change its 
                    // position to fixed to float to top, otherwise change 
                    // it back to relative
            if (scroll_top > floating_navigation_offset_top) { 
                $('#nav').css({ 'position': 'fixed', 'top':0});
            } else {
                $('#nav').css({ 'position': 'relative' }); 
            }   
        };
         
        // run function on load
        floating_navigation();
         
        // run function every time you scroll
        $(window).scroll(function() {
             floating_navigation();
        });
     
    });
    </script>
    Any Ideas on how to get the navbar to extend to both sides?
    http://hatternews.com/index-3.html

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    Hey there,
    Well for starters, The way your code currently stands - I see that you are adding top:0 and position fixed.

    What you will need to do is also add
    Code:
    left:0;
    Than you will need to center the inner UL by adding
    Code:
     float:none; width:960px; and margin:0 auto;
    Hope this helps

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is this in the css or the script?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •