WordPress.org

Ready to get started?Download WordPress

Forums

Brightpage
Center Align Navigation (8 posts)

  1. comforteagle03
    Member
    Posted 1 year ago #

    So I'm trying to get the navigation bar to center align. I've gone though every line of the "top-nav and dropmenu" section of the CSS and can't get it to center for anything. After much frustration the closest I could get was center aligning the text within the dropdown menu but that's it, not the entire menu itself. ideas?

    http://wordpress.org/extend/themes/brightpage/

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Centred navigations are applied when there's a width: (n)px and margin: 0 auto; on the <ul>.
    http://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.

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Agh, beat by 30 seconds :)!

  5. comforteagle03
    Member
    Posted 1 year ago #

    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!

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  7. comforteagle03
    Member
    Posted 1 year ago #

    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 http://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....

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags