...

View Full Version : Resolved Moving Top Navbar Directly Below Header



TheJedi
08-28-2010, 09:47 PM
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:


/*========= 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:


<!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.

met
08-28-2010, 09:52 PM
try this

have roughly commented it


<!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 -->

TheJedi
08-28-2010, 09:58 PM
Yes, that did it! Thanks so much for helping me. :thumbsup::thumbsup:

EDIT: I just noticed your comment about adding #suckerfish to my style.css file. Do you mean like this?


/*========= SUCKERFISH =========*/
#suckerfish {
overflow:auto
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum