Help Centering a Menu

Dev Shed Forums Sponsor:

January 10th, 2013, 11:20 AM

Rick5150

Registered User

Join Date: Jan 2013

Posts: 2

Time spent in forums: 11 m 25 sec
Reputation Power: 0

Help Centering a Menu

I am trying to center a menu from my CSS on a WordPress site and I am having no luck. What information do you need to help and I will provide it. I increased the padding on the menu items and it looked great in FF and Chrome, but in IE it wrapped the menu into a new line below the original menu.

Thanks in advance.

Code:

/* =MENUS
-------------------------------------------------------------- */

/* Menu Primary
----------------------------*/

.menu-primary-container {
   float: right;
    padding:0;
    position:relative;
    height: 38px;
    background: url(images/menu-primary-bg.png) left top repeat-x;
    z-index: 400;
    margin-top: 10px;
}

.menu-primary {
}

.menu-primary ul {
	min-width: 160px;
}

/* First Level - Menu Primary */

.menu-primary li a {
    color: #FFFFFF;
    padding: 14px 12px 13px 12px;
	text-decoration: none;
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    background: #124591;
    font-weight: normal;
    margin: 0 2px 0 0;
}

.menu-primary li a:hover, .menu-primary li a:active, .menu-primary li a:focus, 
.menu-primary li:hover > a, .menu-primary li.current-cat > a, .menu-primary li.current_page_item > a, .menu-primary li.current-menu-item > a {
    color: #FFFFFF;
    outline: 0;
    background: url(images/menu-primary-bg.png) left -138px repeat-x;
}

/* Child Levels - Menu Primary */

.menu-primary li li a {
	color: #fff;
    text-transform: none;
    background: #124591;
    padding: 10px 15px;
    margin: 0;
    border: 0;
    font-weight: normal;
}

.menu-primary li li a:hover, .menu-primary li li a:active, .menu-primary li li a:focus, 
.menu-primary li li:hover > a, .menu-primary li li.current-cat > a, .menu-primary li li.current_page_item > a, .menu-primary li li.current-menu-item > a {
	color: #fff;
    background: #1E63B3;
    outline: 0;
    border-bottom:0;
    text-decoration: none;
}


/* Arrows Menu Primary */

.menu-primary a.sf-with-ul {
    padding-right: 20px;
    min-width: 1px;
}
.menu-primary  .sf-sub-indicator {
    position: absolute;
    display: block;
    overflow: hidden;
    right: 0;
    top:  0;
    padding: 13px 10px 0 0;
}

.menu-primary  li li .sf-sub-indicator {
    padding: 9px 10px 0 0;
}

/* Shadows Menu Primary */

.wrap-menu-primary .sf-shadow ul {
    background:	url('images/menu-primary-shadow.png') no-repeat bottom right;
}

/* Menu Secondary
----------------------------*/

.menu-secondary-container {
    position:relative;
    height: 38px;
    z-index: 300;
    background: url(images/menu-secondary-bg.png) left top repeat-x;
}

.menu-secondary {}

.menu-secondary ul {
    min-width: 160px;
}

/* First Level - Menu Secondary */
.menu-secondary li a {
    color: #FFFFFF;
    padding: 13px 15px ;
	text-decoration: none;
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
}

.menu-secondary li a:hover, .menu-secondary li a:active, .menu-secondary li a:focus, 
.menu-secondary li:hover > a, .menu-secondary li.current-cat > a, .menu-secondary li.current_page_item > a, .menu-secondary li.current-menu-item > a {
    color: #fff;
    background: url(images/menu-secondary-bg.png) left -138px repeat-x;
    outline: 0;
}

/* Child Levels - Menu Secondary */

.menu-secondary li li a {
	color: #fff;
    background: #216CBF;
    padding: 10px 15px;
    text-transform: none;
    margin: 0;
    font-weight: normal;
}

.menu-secondary li li a:hover, .menu-secondary li li a:active, .menu-secondary li li a:focus, 
.menu-secondary li li:hover > a, .menu-secondary li li.current-cat > a, .menu-secondary li li.current_page_item > a, .menu-secondary li li.current-menu-item > a {
	color: #fff;
    background: #2981DC;
    outline: 0;
}

/* Arrows - Menu Secondary */

.menu-secondary a.sf-with-ul {
    padding-right: 26px;
    min-width: 1px;
}
.menu-secondary  .sf-sub-indicator {
    position: absolute;
    display: block;
    overflow: hidden;
    right: 0;
    top:  0;
    padding: 12px 13px 0 0;
}

.menu-secondary li li .sf-sub-indicator {

    padding: 9px 13px 0 0;
}

/* Shadows - Menu Secondary */

.wrap-menu-secondary .sf-shadow ul {
    background:	url('images/menu-secondary-shadow.png') no-repeat bottom right;
}

January 10th, 2013, 03:38 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 225

Time spent in forums: 2 Days 3 h 4 m 43 sec
Reputation Power: 7

Can you add the HTML please?

Regards,

NM.

__________________
Gardenable: http://www.labtec.0fees.net/Gardena...oved/?page=home
Carewizard: http://www.carewizard.co.uk

January 10th, 2013, 04:41 PM

Rick5150

Registered User

Join Date: Jan 2013

Posts: 2

Time spent in forums: 11 m 25 sec
Reputation Power: 0

Most of the site is php. I have no idea where to look. Here are the two best guesses.

Here is the header.php file:

Code:

 <?php global $theme; ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><?php function wp_initialize_the_theme() { if (!function_exists("wp_initialize_the_theme_load") || !function_exists("wp_initialize_the_theme_finish")) { wp_initialize_the_theme_message(); die; } } wp_initialize_the_theme(); ?>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php $theme->meta_title(); ?></title>
<?php $theme->hook('meta'); ?>
<link rel="stylesheet" href="<?php echo THEMATER_URL; ?>/css/reset.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="<?php echo THEMATER_URL; ?>/css/defaults.css" type="text/css" media="screen, projection" />
<!--[if lt IE 8]><link rel="stylesheet" href="<?php echo THEMATER_URL; ?>/css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" />

<?php if ( is_singular() ) { wp_enqueue_script( 'comment-reply' ); } ?>
<?php  wp_head(); ?>
<?php $theme->hook('head'); ?>

</head>

<body <?php body_class(); ?>>
<?php $theme->hook('html_before'); ?>

<div id="container">

    <div id="header">
    
        <div class="logo">
        <?php if ($theme->get_option('themater_logo_source') == 'image') { ?> 
            <a href="<?php echo home_url(); ?>"><img src="<?php $theme->option('logo'); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>" /></a>
        <?php } else { ?> 
            <?php if($theme->display('site_title')) { ?> 
                <h1 class="site_title"><a href="<?php echo home_url(); ?>"><?php $theme->option('site_title'); ?></a></h1>
            <?php } ?> 
            
            <?php if($theme->display('site_description')) { ?> 
                <h2 class="site_description"><?php $theme->option('site_description'); ?></h2>
            <?php } ?> 
        <?php } ?> 
        </div><!-- .logo -->

        <div class="header-right">
            <?php if($theme->display('menu_primary')) { ?>
                <div class="clearfix">
                    <?php $theme->hook('menu_primary'); ?>
                </div>
            <?php } ?>
        </div><!-- .header-right -->
        
    </div><!-- #header -->
    
    <?php if($theme->display('menu_secondary')) { ?>
        <div class="clearfix">
            <?php $theme->hook('menu_secondary'); ?>
        </div>
    <?php } ?>

..and here is the index.php file:

Code:

<?php global $theme; get_header(); ?>

    <div id="main">
    
        <?php $theme->hook('main_before'); ?>

        <div id="content">
        
            <?php $theme->hook('content_before'); ?>
            
            <?php 
                if (have_posts()) : while (have_posts()) : the_post();
                    /**
                     * The default post formatting from the post.php template file will be used.
                     * If you want to customize the post formatting for your homepage:
                     * 
                     *   - Create a new file: post-homepage.php
                     *   - Copy/Paste the content of post.php to post-homepage.php
                     *   - Edit and customize the post-homepage.php file for your needs.
                     * 
                     * Learn more about the get_template_part() function: http://codex.wordpress.org/Function_Reference/get_template_part
                     */

                    get_template_part('post', 'homepage');
                    
                endwhile;
                
                else :
                    get_template_part('post', 'noresults');
                endif; 
                
                get_template_part('navigation');
            ?>
            
            <?php $theme->hook('content_after'); ?>
        
        </div><!-- #content -->
    
        <?php get_sidebars(); ?>
        
        <?php $theme->hook('main_after'); ?>
        
    </div><!-- #main -->
    
<?php get_footer(); ?>

Help Centering a Menu

Developer Shed Advertisers and Affiliates