superfish

How to center superfish menu

I have found this templatedemo: http://sunflower62.pas-solutions.ch/index.php?id=10

Givs a change to center the menuitems? I have found a few tutorials, but the menu is allways left.

Solution

  • You can just use the text-center, display: inline-block trick and remove the floats.

    .sf-menu {
    text-align: center;
}

.sf-menu li {
    text-align: center;
    display: inline-block;
    float: none;
}

    Of course, if you have sub-menu items you will need to position them correctly.

    To fix the sub-menu you can use:

    .sf-menu ul {
    text-align: center;
    display: block !important;
    max-width: 12.5rem;
}
.sf-menu ul li{
    width: 100%;
    display: block;
}