WordPress Menu Items don’t want to Center

1 Views

I have some menu items which just don’t want to center no matter what I do. I’m really not sure what I’m doing wrong. I feel like it might be a problem with the PHP pulling the menu items (I don’t know PHP, it’s from a theme) because when I manually add in my own UL of menu items, they center perfectly.

Any help would be appreciated!

Read More

PHP File Code 

<div id="hmenubar">

    <?php $navcheck = '' ; ?>

    <?php $navcheck = wp_nav_menu( array(   'container_class' => 'menu-header', 
                        'theme_location' => 'primary' , 
                        'menu_class' => 'nav', 
                        'fallback_cb' => '', 
                        'echo' => false ) ); ?>
    <?php  if ($navcheck == '') { ?>

        <ul class="nav">            

            <?php wp_list_pages('title_li=&sort_column=menu_order'); ?>

        </ul>

    <?php } else echo($navcheck); ?>  

</div>

CSS Code 

#hmenu_container {
height: 30%;
width:100%;
display: block;
text-align; center;
}

#hmenubar {
margin: 0 auto; 
}

#hmenubar ul {
font-family: 'Calligraffitti', cursive;
font-size: 1.5rem;
display: inline-block;
list-style: none;
margin: 0 auto;
}

Edit: HTML of List 

<div class="menu-header">

<ul id="menu-photography" class="nav">

<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-15"><a href="/">Home</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="/blog/">Blog</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="/about/">About</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="/gallery/">Gallery</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="/projects/">Projects</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="/insquares">Insquar.es</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="/instagram">Instagram</a></li>

</ul>
</div>
Post Views: 1

Related posts

Leave a Reply

2 comments 

  1. #hmenu_container {
    height: 30%;
    width:100%;
}
#hmenubar {
    display: inline;
    text-align: center;
}
#hmenubar ul {
    font-family:'Calligraffitti', cursive;
    font-size: 1.5rem;
    display: inline-block;
    list-style: none;
}
#hmenubar li {
    display: inline;
}

    JSFiddle

  2. I ran into this very problem recently, and when I couldn’t get that menu to center, I searched for help on Google, and found this page. Like you, I tried JSFiddle’s answer, and it did not work, so I started to break down everything within this specific code. I did finally get the menu bar to center, when I noticed this part of the code:

    PHP Code:

    <?php $navcheck = wp_nav_menu( array(   'container_class' => 'menu-header', 
                    'theme_location' => 'primary' , 
                    'menu_class' => 'nav',
                    'fallback_cb' => '', 
                    'echo' => false ) ); ?>

    Specifically:

                        'menu_class' => 'nav',

    When I looked for nav in my CSS files, I found it located in a file named superfish.css in the theme I was editing. I noticed that this file contained essentially the same code twice, one labeled as a demo skin, with the code in question like this:

    CSS:

    /*** DEMO SKIN ***/
.nav {
float:  left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}

    Easily enough, I changed the float: left; to float: center; and my menu bar centered.

    I hope this helps anyone else who has this problem! 🙂