I've tried centering my site logo with CSS, but nothing changes. Is there a way to center the site logo on the header when using a Kalium theme?

1 Answers

Orlandster On

I think it depends on the Header you are using. But as far as I see all of them are built with a flex layout.

So to give you an example for the main layout: https://demo.kaliumtheme.com/main/

In this case you could really just set the flex-direction to column and the justify-content to center:

header.main-header .logo-and-menu-container {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

In addition I would give the logo some margin-bottom:

.header-logo.logo-image {
    margin-bottom: 30px;

Et voila, looks pretty good.