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
    Aug 2010
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Moving Top Navbar Directly Below Header

    This is my first WP blog from scratch, and I am trying to move the entire top navbar ('Home' button AND 'Search' button) directly below the header logos, and right above the 'Category' navbar.

    Here is the site I am working on at the moment: http://testing-ground.info
    And this is what I hope to accomplish here: http://ecigs-today.com

    Here is the Header section from style.css:
    Code:
    /*========= HEADER =========*/
    
    /*- Page Navigation -*/
    #nav{
    	height: 30px;
    	padding: 2px 0px !important;
    	background-color: #FFFFFF;
    	margin:15px 15px 0px !important;
    	border-top:1px solid #ddd;
    	border-bottom:1px solid #ddd;
    	width: 930px !important;
    }
    #nav-left {
    	float:left;
    	display:inline;
    	width:600px;
    	}
    #nav-right {
    	float:right;
    	display:inline;
    	width:330px;
    	margin:0px !important;
    	padding:0px !important;
    	}
    
    /*- Dropdowns-*/
    
    #nav1, #nav1 ul{
    	padding: 0;
    	float:left;
    	list-style: none;
    }
    #nav1 {
    	padding: 0;
    	font-size:13px;
    	float:left;
    }
    #nav1 a {
    	display: block;
    	padding-left:15px;
    	padding-right:15px;
    }
    #nav1 li {
    	float: left;
    	line-height:30px;
    	font-weight:bold;
    	font-size:11px;	
    	text-transform:uppercase;
    }
    #nav1 li a:hover {
    	background: none;
    	text-decoration:none;
    	color:#ffffff;
    }
    #nav1 li ul {
    	position: absolute;
    	width: 15em;
    	left: -999em;
    	padding-top:1px;
    }
    #nav1 li:hover ul, #nav1 li.sfhover ul {
    	left: auto;
    }
    #nav1 li ul li {
        background: #FFFFFF;
    	border-bottom:1px solid #dedbd1;	
    	border-left:1px solid #dedbd1;	
    	border-right:1px solid #dedbd1;			
    	line-height:28px;	
    	width:15em;
    }
    
    #nav1 li:hover, #nav1 li.hover {
        position: static;
    }
    #nav1 li ul ul {
    	margin: -29px 0 0 15em;
    	border-top:1px solid #dedbd1;	
    }
    
    #nav1 li:hover ul ul, #nav1 li.sfhover ul ul {
    	left: -999em;
    }
    #nav1 li:hover ul, #nav1 li li:hover ul, #nav1 li.sfhover ul, #nav1 li li.sfhover ul {
    	left: auto;
    }
    #nav1 li:hover ul ul, #nav1 li:hover ul ul ul, #nav1 li.sfhover ul ul, #nav1 li.sfhover ul ul ul {
    	left: -999em;
    }
    #nav1 li:hover ul, #nav1 li li:hover ul, #nav1 li li li:hover ul, #nav1 li.sfhover ul, #nav1 li li.sfhover ul, #nav1 li li li.sfhover ul {
    	left: auto;
    } 
    
    #nav1 li:hover ul, #nav1 li.sfhover ul {
    	left: auto;
    	z-index:1000;	
    }
    
    /*- Category Navigation -*/
    
    /*- Nav / Dropdowns-*/
    #nav2 {
    	margin:0 0 15px 15px !important;
    	margin:0 0 7px 7px;	 
    }
    
    #nav2, #nav2 ul{
    	padding: 0;
    	float:left;
    	list-style: none;
    }
    #nav2 {
    	padding: 0;
    	font-size:13px;
    	float:left;
    	width:930px;
    	border-top: 1px solid #DDDDDD;
    }
    #nav2 a {
    	display: block;
    	padding-left:15px;
    	padding-right:15px;
    	border-right: 1px solid #DDDDDD;
    }
    #nav2 li {
    	float: left;
    	line-height:30px;
    }
    #nav2 li a:hover {
    	background: none;
        text-decoration: none;
    }
    #nav2 li ul {
    	position: absolute;
    	width: 15em;
    	left: -999em;
    	z-index: 99999;
    }
    #nav2 li:hover ul, #nav2 li.sfhover ul {
    	left: auto;
    	z-index:1000;	
    }
    #nav2 li ul li {
        background: #FFFFFF;
    	border-bottom:1px solid #dedbd1;	
    	border-left:1px solid #dedbd1;	
    	border-right:1px solid #dedbd1;			
    	line-height:28px;	
    	width:15em;
    }
    #nav2 li:hover, #nav2 li.hover {
        position: static;
    }
    #nav2 li ul ul {
    	margin: -29px 0 0 15em;
    }
    #nav2 li:hover ul ul, #nav2 li.sfhover ul ul {
    	left: -999em;
    }
    #nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul {
    	left: auto;
    }
    #nav2 li:hover ul ul, #nav2 li:hover ul ul ul, #nav2 li.sfhover ul ul, #nav2 li.sfhover ul ul ul {
    	left: -999em;
    }
    #nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
    	left: auto;
    } 
    
    
    /*- Search -*/
    #search{
    	float: right;
    	height: 27px;
    	width:310px;
    	margin: 3px 0px 0px !important;
    	padding:0px !important;
    }
    * html #search{
    	margin-right: 8px;
    }
    #search input{
    	background: #ffffff;
    	border: 1px solid #dddddd;
    	color: #000000;
    	float: left;
    	font-size: 11px;
    	width:223px;
    	margin:1px 0px 0px;
    	padding: 3px 4px 4px;
    }
    #search .btn{
    	padding: 0;
    	height:22px;
    	width: auto;
    	margin:1px 0px 0px 5px !important;
    	border:none;
    	width:69px;
    }
    /*- Header -*/
    #header{
    	height: 100px;
    	background-color: #ffffff;
    	margin: 0 15px;
    	padding: 0px;
    }
    /*- Logo -*/
    #header h1{
    	float: left;
    	display:inline;
    	line-height: 100px;
    	font-size: 24px;
    }
    #header h1 a{
    	display: block;
    	height: 93px;
    	width: 389px;
    	color: #000000;
    	font-size: 28px;
    }
    
    /*- Top Banner -*/
    #topbanner {
    	float: right;
    	width: 468px;
    	padding:20px 0px 0px;
    }
    
    #topbanner img{
    	float: right;
    }
    
    /*- RSS -*/
    #rss a{
    	color: #666666;
    }
    #rss h2{
    	padding:10px;
    	font-size:14px;
    	margin-bottom:10px;
    }
    #rss ul{
    	margin: 0px;
    	padding: 10px;
    	float:left;
    }
    #rss li{
    	margin: 0px;
    	border:none !important;
    	padding: 5px;
    }
    #rss img{
    	float: right;
    	padding-left: 10px;
    	margin-top: 5px;
    }
    And here is my header.php file:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">
    
    <title>
    	<?php if ( is_home() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php bloginfo('description'); ?><?php } ?>
    	<?php if ( is_search() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php _e('Search Results',woothemes); ?><?php } ?>
    	<?php if ( is_author() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php _e('Author Archives',woothemes); ?><?php } ?>
    	<?php if ( is_single() ) { ?><?php wp_title(''); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php } ?>
    	<?php if ( is_page() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php wp_title(''); ?><?php } ?>
    	<?php if ( is_category() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php _e('Archive',woothemes); ?>&nbsp;|&nbsp;<?php single_cat_title(); ?><?php } ?>
    	<?php if ( is_month() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php _e('Archive',woothemes); ?>&nbsp;|&nbsp;<?php the_time('F'); ?><?php } ?>
    	<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php _e('Tag Archive',woothemes); ?>&nbsp;|&nbsp;<?php  single_tag_title("", true); } } ?>
    </title>
        
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
        <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php if ( get_option('woo_feedburner_url') <> "" ) { echo get_option('woo_feedburner_url'); } else { echo get_bloginfo_rss('rss2_url'); } ?>" />
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
           
        <!--[if IE 6]>
        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/suckerfish.js"></script>
        <![endif]-->
           
        <?php if ( is_single() ) wp_enqueue_script( 'comment-reply' ); ?>
        <?php wp_head(); ?>
    
    
    <?php if(is_home()){ ?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/slider.css" media="screen" />
    <script type="text/javascript">
    
     	
    	jQuery(document).ready(function(){
    	    jQuery('#wooslider').wooslider(
    	    <?php if(get_option('woo_slider_sfade') != ''){ ?>
    	    {
    	    sfade : <?php echo get_option('woo_slider_sfade'); ?>, // Slide Fade
    		cfade : <?php echo get_option('woo_slider_cfade'); ?>, // content Fade
    		offset : 20, // Padding offset
    		speed: <?php echo get_option('woo_slider_speed'); ?>,
    		timeout: <?php echo get_option('woo_slider_timeout'); ?>,
    		content_speed: <?php echo get_option('woo_slider_content_speed'); ?>
    		}
    		<?php } ?>
    		);
    	});
    
    </script>
    <!--  IE8 HACK for Slider-->
    <!--[if IE 8]>
    	<style>
    	.slider-container .slide-content { FILTER: alpha(opacity=100)!important; z-index:999!important} 
    	.slide{FILTER: alpha(opacity=100)!important;}
    	.slider-nav .slider-right { background: url('<?php bloginfo('template_url'); ?>/images/fleche2.gif') no-repeat center bottom; }
    	.slider-nav .slider-left { background: url('<?php bloginfo('template_url'); ?>/images/fleche1.gif') no-repeat center bottom; }
    	</style>
    <![endif]-->
    
    	    
    	    <?php } ?>
    
    
    
    </head>
    
    <body>
    
    <!-- Set video category -->
    <?php $cat = get_option('woo_video_category'); $GLOBALS[vid_cat] = $wpdb->get_var("SELECT term_id FROM $wpdb->terms WHERE name='$cat'"); ?>
    
    <div id="page">
    
    <div id="nav"> <!-- START TOP NAVIGATION BAR -->
    	
    		<div id="nav-left">
    	
    			<ul id="nav1">
                
                	<?php /* If this is the frontpage */ if ( is_home() ) { ?>
    				<li class="current_page_item"><a href="<?php echo get_option('home'); ?>/"><?php _e('Home',woothemes); ?></a></li>
    				<?php } else { ?>
    				<li class="page_item"><a href="<?php echo get_option('home'); ?>/"><?php _e('Home',woothemes); ?></a></li>
    				<?php } ?>
    				<?php wp_list_pages('sort_column=menu_order&title_li=' ); ?>		
    			
    			</ul>
    		
    		</div><!--/nav-left -->
    
    		<div id="nav-right">		
    		
    			<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
    				
    				<div id="search">
    					<input type="text" value="<?php _e('Enter search keyword',woothemes); ?>" onclick="this.value='';" name="s" id="s" />
    					<input name="" type="image" src="<?php bloginfo('stylesheet_directory'); ?>/<?php woo_style_path(); ?>/search.gif" value="<?php _e('Go',woothemes); ?>" class="btn" />
    				</div><!--/search -->
    				
    			</form>
    		
    		</div><!--/nav-right -->
    		
    	</div><!--/nav-->
    	
    	<div class="fix"></div>
    	
    	<div id="header"><!-- START LOGO LEVEL WITH RSS FEED -->
    		
    		<h1><a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?>"><img src="<?php if ( get_option('woo_logo') <> "" ) {  echo get_option('woo_logo'); } else { ?><?php bloginfo('stylesheet_directory'); ?>/<?php woo_style_path(); ?>/logo.gif<?php } ?>" alt="" /></a></h1>
    		
    		<!-- Top Ad Starts -->
    			<?php if (get_option('woo_ad_top_disable') == "false") include (TEMPLATEPATH . "/ads/top_ad.php"); ?>
    		<!-- Top Ad Ends -->
    		
    	</div><!--/header -->
        
        	
    	
    	<div id="suckerfish"><!-- START CATEGORY NAVIGATION (SUCKERFISH CSS) -->
    		
    			<ul id="nav2">
    				<?php wp_list_categories('title_li=') ?>	
    			</ul>
    					
    	</div><!--/nav2-->
    	
        <div id="columns"><!-- START MAIN CONTENT COLUMNS -->
    Any help would be greatly appreciated. Thanks, everyone.
    Last edited by TheJedi; 08-28-2010 at 09:46 PM.

  • #2
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    try this

    have roughly commented it
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">

    <title>
        <?php if ( is_home() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php bloginfo('description'); ?><?php ?>
        <?php if ( is_search() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php _e('Search Results',woothemes); ?><?php ?>
        <?php if ( is_author() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php _e('Author Archives',woothemes); ?><?php ?>
        <?php if ( is_single() ) { ?><?php wp_title(''); ?>&nbsp;|&nbsp;<?php bloginfo('name'); ?><?php ?>
        <?php if ( is_page() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php wp_title(''); ?><?php ?>
        <?php if ( is_category() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php _e('Archive',woothemes); ?>&nbsp;|&nbsp;<?php single_cat_title(); ?><?php ?>
        <?php if ( is_month() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php _e('Archive',woothemes); ?>&nbsp;|&nbsp;<?php the_time('F'); ?><?php ?>
        <?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php bloginfo('name'); ?>&nbsp;|&nbsp;<?php _e('Tag Archive',woothemes); ?>&nbsp;|&nbsp;<?php  single_tag_title(""true); } } ?>
    </title>
        
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
        <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php if ( get_option('woo_feedburner_url') <> "" ) { echo get_option('woo_feedburner_url'); } else { echo get_bloginfo_rss('rss2_url'); } ?>" />
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
           
        <!--[if IE 6]>
        <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/suckerfish.js"></script>
        <![endif]-->
           
        <?php if ( is_single() ) wp_enqueue_script'comment-reply' ); ?>
        <?php wp_head(); ?>


    <?php if(is_home()){ ?>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/slider.css" media="screen" />
    <script type="text/javascript">

         
        jQuery(document).ready(function(){
            jQuery('#wooslider').wooslider(
            <?php if(get_option('woo_slider_sfade') != ''){ ?>
            {
            sfade : <?php echo get_option('woo_slider_sfade'); ?>, // Slide Fade
            cfade : <?php echo get_option('woo_slider_cfade'); ?>, // content Fade
            offset : 20, // Padding offset
            speed: <?php echo get_option('woo_slider_speed'); ?>,
            timeout: <?php echo get_option('woo_slider_timeout'); ?>,
            content_speed: <?php echo get_option('woo_slider_content_speed'); ?>
            }
            <?php ?>
            );
        });

    </script>
    <!--  IE8 HACK for Slider-->
    <!--[if IE 8]>
        <style>
        .slider-container .slide-content { FILTER: alpha(opacity=100)!important; z-index:999!important} 
        .slide{FILTER: alpha(opacity=100)!important;}
        .slider-nav .slider-right { background: url('<?php bloginfo('template_url'); ?>/images/fleche2.gif') no-repeat center bottom; }
        .slider-nav .slider-left { background: url('<?php bloginfo('template_url'); ?>/images/fleche1.gif') no-repeat center bottom; }
        </style>
    <![endif]-->

            
            <?php ?>



    </head>

    <body>

    <!-- Set video category -->
    <?php $cat get_option('woo_video_category'); $GLOBALS[vid_cat] = $wpdb->get_var("SELECT term_id FROM $wpdb->terms WHERE name='$cat'"); ?>

    <div id="page">



    <!-- remove top nav from here -->


        
        <div id="header"><!-- START LOGO LEVEL WITH RSS FEED -->
            
            <h1><a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?>"><img src="<?php if ( get_option('woo_logo') <> "" ) {  echo get_option('woo_logo'); } else { ?><?php bloginfo('stylesheet_directory'); ?>/<?php woo_style_path(); ?>/logo.gif<?php ?>" alt="" /></a></h1>
            
            <!-- Top Ad Starts -->
                <?php if (get_option('woo_ad_top_disable') == "false") include (TEMPLATEPATH "/ads/top_ad.php"); ?>
            <!-- Top Ad Ends -->
            
        </div><!--/header -->
        
            
        

    <!-- move the nav to here -->


    <div id="nav"> <!-- START TOP NAVIGATION BAR -->
        
            <div id="nav-left">
        
                <ul id="nav1">
                
                    <?php /* If this is the frontpage */ if ( is_home() ) { ?>
                    <li class="current_page_item"><a href="<?php echo get_option('home'); ?>/"><?php _e('Home',woothemes); ?></a></li>
                    <?php } else { ?>
                    <li class="page_item"><a href="<?php echo get_option('home'); ?>/"><?php _e('Home',woothemes); ?></a></li>
                    <?php ?>
                    <?php wp_list_pages('sort_column=menu_order&title_li=' ); ?>        
                
                </ul>
            
            </div><!--/nav-left -->

            <div id="nav-right">        
            
                <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
                    
                    <div id="search">
                        <input type="text" value="<?php _e('Enter search keyword',woothemes); ?>" onclick="this.value='';" name="s" id="s" />
                        <input name="" type="image" src="<?php bloginfo('stylesheet_directory'); ?>/<?php woo_style_path(); ?>/search.gif" value="<?php _e('Go',woothemes); ?>" class="btn" />
                    </div><!--/search -->
                    
                </form>
            
            </div><!--/nav-right -->
            
        </div><!--/nav-->
        
        <div class="fix"></div>



    <!-- start the 2nd nav bar -->


        <div id="suckerfish"> 
    <!-- you want to add overflow:auto to #suckerfish somewhere in your CSS -->
    <!-- START CATEGORY NAVIGATION (SUCKERFISH CSS) -->
            
                <ul id="nav2">
                    <?php wp_list_categories('title_li='?>    
                </ul>
                        
        </div><!--/nav2-->
        
        <div id="columns"><!-- START MAIN CONTENT COLUMNS -->

  • Users who have thanked met for this post:

    TheJedi (08-28-2010)

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, that did it! Thanks so much for helping me.

    EDIT: I just noticed your comment about adding #suckerfish to my style.css file. Do you mean like this?
    Code:
    /*========= SUCKERFISH =========*/
    #suckerfish {
            overflow:auto
    }
    Last edited by TheJedi; 08-28-2010 at 09:29 PM.


  •  

    Posting Permissions

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