css - How do I center the navigation?

Posted on 2011-05-05
Last Modified: 2012-05-11
On this page, how do I center the navigation:

There are multiple css files because of the template setup and choices of  menu colors.

username - nnnn
pw = pwd

header.php - part of the code:
<div id="main-menu">
			<div id="menu-inner" class="<?php echo $themeblvd_layout_menu_shape; ?>-<?php echo $themeblvd_layout_menu_color; ?>">
				<div class="menu-left"><!-- --></div>
				<div class="menu-middle">
					<div class="menu-middle-inner">
						<?php wp_nav_menu( array('container' => '', 'theme_location' => 'primary', 'fallback_cb' => 'themeblvd_menu_fallback' ) ); ?>
						<?php if($themeblvd_layout_menu_search == 'show') : ?>
							<div id="search-popup-wrapper">

								<a href="#" title="" id="search-trigger">Search</a>
								<div class="search-popup-outer">
									<div class="search-popup">
									    <div class="search-popup-inner">
									        <form method="get" action="<?php bloginfo('url'); ?>">
									                <input type="text" class="search-input" name="s" onblur="if (this.value == '') {this.value = '<?php _e('Search', 'themeblvd'); ?>';}" onfocus="if(this.value == '<?php _e('Search', 'themeblvd'); ?>') {this.value = '';}" value="<?php _e('Search', 'themeblvd'); ?>" />
									                <input type="submit" class="submit" value="" />
									    </div><!-- .search-popup-inner (end) -->
									</div><!-- .search-popup (end) -->
								</div><!-- .search-popup-outer (end) -->
							</div><!-- #search-popup-wrapper (end) -->

						<?php endif; ?>
					</div><!-- .menu-middle-inner (end) -->
				</div><!-- .menu-middle (end) -->
				<div class="menu-right"><!-- --></div>
			</div><!-- #menu-inner (end) -->
		</div><!-- #main-menu (end) -->

Open in new window

Question by:carolsanjose
    LVL 12

    Expert Comment

    class menu-middle should add padding-left of 148px and width should be reduced to 820px to compensate.

    Author Comment

    Great...that worked except for one little search box issue.
    Take a look:

    How do I align the search button back into the navigation bar?
    LVL 12

    Accepted Solution

    set search-popup-wrapper {width: 820px;}

    Author Comment

    Perfect...thank you!

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Suggested Solutions

    Most web designers often experience crossbrowser issues during interface design / development.  On common problem is with Internet Explorer due to its rendering discrepancies between previous versions.  Here are some techniques I use to help avoid c…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now