[Theme: Brightpage] Center Align Navigation

Centred navigations are applied when there’s a width: (n)px and margin: 0 auto; on the <ul>.
https://www.w3.org/Style/Examples/007/center.en.html

Be careful when applying a width to the navigation; check whether page items are likely to be added, removed or renamed as your width will have to adjust accordingly.

Need to see the site to help with things like this…basically you need to set a width (less than the enclosing element) and then set the margins (left and right) to “auto.” The width depends on the size of the menu and will have to be changed if you add or remove things from the menu.

Agh, beat by 30 seconds :)!

I’m building the website offline first, so right the URL won’t do much. At the moment it is 127.0.0.1:4001/wordpress. I’m using InstantWP to make it at the moment. I did try the first suggestion of changing the width to the full 980px and margin to “0 auto;” however is still won’t move.

There are some other items I found within the div tag that are affecting the layout. Here’s samples how the navigation menu looks from the header in original form before I tried adjusting:

<div id="top-nav" class="clearfix">
<div id="menu" class="grid_1 first">
<?php if (function_exists('wp_nav_menu')) { wp_nav_menu(array('theme_location' => 'wpj-main-menu', 'menu_id' => 'dropmenu', 'fallback_cb' => 'wpj_default_menu')); }
else { wpj_default_menu(); } ?>
</div> <!-- end div #menu -->
</div> <!-- end div #top-nav -->

The CSS for the navigation menu is:
#top-nav { background: url(images/top-nav.jpg); }
#menu { width: 980px; position: relative; z-index:100; }
#dropmenu { margin: 0; padding: 0 0 0 30px; list-style-type: none; }
#dropmenu a { display: block; padding: 15px 15px; text-decoration: none; color: #999; font-size: 12px; text-transform: uppercase; }
#dropmenu ul { position: absolute; display: none; top: 40px; left: 0; padding: 9px; }
#dropmenu li { float: left; position: relative; list-style: none; }
#dropmenu ul ul { top: auto; }
#dropmenu li ul { top: 40px; left: -10px; margin: 0; position: absolute; z-index: 200; }
#dropmenu li ul a { width: 120px; height: auto; float: left; }
#dropmenu li ul ul { top: -10px; left: 140px; margin: 0; }
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul { display: none; }
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul { display: block; }
#dropmenu ul li, #dropmenu li.active .children li.active ul li { background: #f1f1f1; border-top: 1px solid #ddd; -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15); }
#dropmenu ul li:hover { background: #fff; }

and that last bit about class=”grid_1 first” is from:
.grid_1 { width: 670px; float: left; margin: 0; display: inline; }
and
.first { margin-left: 0; /* the first left column */ }

oddly enough removing the entire class=”grid_1 first” made no change. and yes I did clear the cache.

Thank you in advance!

Hmm, it’s really hard to do CSS work without seeing the site. But one thing is that (as I said above) the width of the element that you are trying to center has to be less than the enclosing element…

Plus you have #menu width set to 980 but grid_1 first is set to 670 (but it also has float: left which certainly throws off the center) and I can’t tell which one of those is taking precedence.

Are you using Firebug or Chrome Inspector to look at the CSS code to see what’s going on? That’s really the only way to deal with CSS…strongly recommend it…

Yes, I’m using Chrome’s inspector. Made some adjustments there to try and adjust however Most recently I did inline CSS as a last resort since that’s supposed to take precedence according to https://www.w3schools.com/css/css_howto.asp but of course it’s not working. I am wondering though why removing the “grid_1 first” made no change. I may just deal with it for now and when the site is live then we’ll have a URL to work with….

Your issue seems to be more with CSS than WordPress, should you be posting on WordPress forums rather than CSS Specific forums?