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.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 26
Like Tree4Likes

Thread: Nav Bar on top issue

  1. #1
    Junior Member
    Join Date
    Jul 2013
    Posts
    16
    Member #
    36916

    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 - Tech news - The Hatter News
    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 it to extend to the left as well?

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    I'm not sure I understand the problem. But if it's that you want the submenu centered under each menu item, then add this to your superfish submenu class:
    Code:
    left:  -60px;
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Jul 2013
    Posts
    16
    Member #
    36916
    No, if you visit the site that I have linked above you will see that when scrolling down the navigation bar will be fixed on top but you will also notice that the navigation bar only extends fully to the right, it doesn't extend to the left as well, this is what I want to fix, how to I get the navigation bar to extend fully to the left and right when scrolling down?

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Okay..then whatever script is creating those inline styles (not the best way to do this, by the way, but to improve it is homework for another day), should read as follows:
    Code:
    <nav id="nav" style="position: fixed; top: 0px;  left:  0px;">
    You need the left positioning to get what you want.
    bluezap likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member
    Join Date
    Jul 2013
    Posts
    16
    Member #
    36916
    Quote Originally Posted by TheGAME1264 View Post
    Okay..then whatever script is creating those inline styles (not the best way to do this, by the way, but to improve it is homework for another day), should read as follows:
    Code:
    <nav id="nav" style="position: fixed; top: 0px;  left:  0px;">
    You need the left positioning to get what you want.
    This works, but the entire menu gets shifted to the left when scrolling down, isn't there any way of centering it?
    Thank You btw.

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    nav ul {margin: 0px auto; width: (whatever the width of his page is);}
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Junior Member
    Join Date
    Jul 2013
    Posts
    16
    Member #
    36916
    I tried this but it did not center it. what am i doing wrong here? i'm terrible at CSS
    Code:
    #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;
            margin: center;
           
    }
    
    
    nav ul {
    	margin: 0px auto; width: 100%;
    
    }

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You don't want width: 100%; That's the width of your page. You want the width of whatever that container is.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Junior Member
    Join Date
    Jul 2013
    Posts
    16
    Member #
    36916
    the exact width of the container is 940px so i tried
    Code:
    #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;
            margin: center;
           
    }
    
    
    nav ul {
    	margin: 0px auto; width: 940px;
    
    }
    still no luck, it wont center.

  11. #10
    Junior Member
    Join Date
    Jul 2013
    Posts
    16
    Member #
    36916
    Is this happening because the navigation bar is set to be fixed to the left by this
    Code:
     
    <nav id="nav" style="position: fixed; top: 0px;  left:  0px;">


Page 1 of 3 1 2 3 LastLast

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
  •  

Tags for this Thread

All times are GMT -6. The time now is 02:13 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com