Trouble centering wp-nav nothing works so far

  • Resolved amobaroti

    (@amobaroti)


    11 years, 7 months ago

    https://millyscakesandevents.com/

    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')); ?>
</div>

    [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{
float:left;
}

ul.dropdown a {/* Menu link styling */
padding:12px;
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 */
}
Viewing 4 replies - 1 through 4 (of 4 total)

  • 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;
}

    Thread Starter amobaroti

    (@amobaroti)

    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 – https://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”]

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter amobaroti

    (@amobaroti)

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Trouble centering wp-nav nothing works so far’ is closed to new replies.