[resolved] Trouble centering wp-nav nothing works so far (5 posts)

  1. amobaroti
    Posted 3 years ago #


    The above is my site and I am having trouble centering wp-nav menu.

    Any suggestions please. The site is not always up I'm afraid.

    this is the menu code

    <div class="nav_menu">
              <?php wp_nav_menu( array( 'theme_location' => 'header-menu',
                                                  'menu_class' => 'dropdown',
                                                  'container_id' => 'navigation',
                                                  'fallback_cb' => 'wp_page_menu')); ?>

    [Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    And this is the css

    .nav_menu {float: left;  }
    /* Menu Bar List */
    ul.dropdown { margin: 0 auto; list-style:none; /* Gets rid of bullets in the list */float:left; width:100%; padding: 0 5px; /* Top and bottom padding of 0. Left and right of 5px */}
    ul.dropdown  li{
    ul.dropdown a {/* Menu link styling */
    color:#FFFFFF; /* Text color of links */
    text-decoration:none; /* Gets rid of underline for links */
    text-shadow:1px 1px 0 #000000; /* Puts a shadow under link 1px down, 1px to right, 0 blur & Black */
  2. WPyogi
    Forum Moderator
    Posted 3 years ago #

    You'll need to make any changes in a Child Theme or custom CSS (you can add that via a plugin such as JetPack or Custom CSS Manager) - so that your changes are not overwritten and lost when WP is updated.

    Once you have that set up, add this to your custom CSS section:

    #access div {
        display: table;
        margin: 0 auto;
  3. amobaroti
    Posted 3 years ago #

    haha, thanks so much. lol after about an hour and just when I was about to give up and dump wp-nav_menu (I've been at it all day yersterday
    ) I tried just one last googled solution which worked perfectly.

    I started with your solution above. Obviously I had to use the div,"nav_menu" as I did not have the "access" div. Your solution worked in centering the menu but I wanted a full width. Searched and searched and read tonnes on centering navs and list items, again, and nothing worked.

    And as I said just as I was looking at my last solution here - http://www.bozzmedia.com/posts/twenty-eleven-theme-center-navigation-menu/

    which reminded me of your solution. I tried the following which worked perfectly

    .nav_menu { text-align:center;}

    ul.dropdown { display:inline-block; list-style:none; padding: 0 5px; }

    Anyone who wants to see the solution can check here
    [Link removed because of "I don't always have the site opened I am afraid"]

  4. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    What solution http://snag.gy/3Vb7t.jpg ? Or did you remove it ?

  5. amobaroti
    Posted 3 years ago #

    I don't always have the theme switched on at the moment. Last time I did that the client posted on facebook for everyone to come and have a look at a site that was nowhere near finished. Hoping that when the site is completed the solution will still be useful to others.

Topic Closed

This topic has been closed to new replies.

About this Topic