Search code examples
wordpresscssalignmentwordpress-theming

How to align the navigation menu in wordpress?


I have a problem.. I can't make the navigation into horizontal.. Please teach me how to align the navigation menu into horizontal and place it in center in WordPress?

I'm newbie in WordPress.. Please help me

Thanks!

Here's the css for navigation:

#toppart #mainnav {
margin: 40px 0 0;
max-width: 100%;
float:none;
text-align:center;
}

#toppart #mainnav ul li {
float: none;
list-style: none;
position: relative;
display:inline;
background: #16212b;
padding: 9px 14px;
}

#toppart #mainnav ul li a {
margin:0;
padding:9px 14px;
display: inline;
}

#toppart #mainnav ul ul {
display: inline;
float: none;
position: relative;
margin-left:20px;
top:0;
left: 0;
z-index:none;
text-align:center;
}

#toppart #mainnav ul ul ul {
display: inline;
float: none;
position: relative;
margin-left:40px;
top:0;
left: 0;
z-index:none;
text-align:center;
}

#toppart #mainnav ul ul li {
border-bottom:1px solid #000;
text-align:center;
}

#toppart #mainnav ul ul ul li {
border-bottom:none;
text-align:center;
}

#toppart #mainnav ul ul li a {
background:none;
display:inline-block;
width:100%;
list-style:square;
text-align:center;
}

#toppart #mainnav ul li a:hover {
background:none;
text-align:center;
}

}

Solution

  • I think you should use somethink like

    #toppart #mainnav ul ul li {
    float: left;
    position: relative;
    }
    

    In the Wordpress menus you are going to have all the items inside li tags so you can use the properties float: left; and position: relative; to get them aligned horizontally

    It is not necessary to change the display property