Support » Themes and Templates » How To Centralize Horizontal Menu Bar

  • Resolved kertoon

    (@kertoon)


    This is my code for horizontal menu bar. How to centralize this in my site. It goes to the left.

    <style type="text/css">
    ul#navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    ul#navbar li {
    float: left;
    border: 1px solid black;
    text-align: center;
    }
    ul#navbar a {
    background-color: #CCC;
    color: #000;
    text-decoration: none;
    display: block;
    width: 120px;
    padding: 4px;
    }
    ul#navbar a:hover {
    background-color: #CFF;
    text-decoration: underline;
    }
    ul#navbar ul {
    display: none;
    list-style-type: none;
    }
    ul#navbar li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
    }
    ul#navbar li:hover li {
    float: none;
    }
    </style>
    
    <ul id="navbar">
    
    <li><a href="#">Home</a></li>
    <li><a href="#">Parent 1</a>
    <ul>
    <li><a href="#">Child 1</a></li>
    <li><a href="#">Child 2</a></li>
    <li><a href="#">Child 3</a></li>
    </ul>
    </li>
    <li><a href="#">Parent 2</a>
    <ul>
    <li><a href="#">Child 1</a></li>
    <li><a href="#">Child 2</a></li>
    <li><a href="#">Child 3</a></li>
    </ul>
    </li>
Viewing 2 replies - 1 through 2 (of 2 total)
  • What theme are you using? Where did you download it from? Why are you adding CSS to the body of a page?

    Thread Starter kertoon

    (@kertoon)

    I got it fixed by adding this:
    ul {
    margin: 0 auto;
    display: inline-block;
    }

    Anyway, thank you for your attention.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How To Centralize Horizontal Menu Bar’ is closed to new replies.