How to Center The Logo and Navigation Menu in Dandelion Theme

Please Note: Theme customizations go beyond the scope of our support services and this article is provided solely as a courtesy to our customers. Please take a moment to review the Scope of our Support.

Centering the Logo or/and the navigation menu of the Dandelion theme can be made with just a few lines on CSS code. Here is all the code you have to add to the Dandelion Options -> Styles Settings -> Additional Styles section:

Dandelion version 3.0.0 and newer:

If you have the responsive layout enabled:

@media screen and (min-width: 1010px) {
#logo-container {
float: none;
margin-left: auto;
margin-right: auto;
}
#logo-container img{
margin: 0 auto;
}
#menu-container {
float: none;
margin: 20px auto 16px auto;
}
#header-top {
height: auto;
}
}

If you have the responsive layout disabled:

#logo-container {
float: none;
margin-left: auto;
margin-right: auto;
}
#logo-container img{
margin: 0 auto;
}
#menu-container {
float: none;
margin: 20px auto 16px auto;
}
#header-top {
height: auto;
}

Dandelion version 2.9.1 and older:

– to center the logo only:

#logo-container {
float: none;
margin-left: auto;
margin-right: auto;
}

-to center logo and navigation menu:

#logo-container {
float: none;
margin-left: auto;
margin-right: auto;
}
#menu-container {
float: none;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
}
#header-top {
height: auto;
}

In the following video you can see how the changes take effect on the theme using a firebug: