Centering logo and menu items in default theme?

Kirby 2 Solved ✅
1

I am playing around with Kirby’s default theme and would like to center the logo graphic at the top of the page followed by having the menu items center-aligned directly below the logo. I can’t seem to make this happen by altering the CSS for the header with text-align: center. Can anyone point me in the right direction on how to achieve this?

Thanks in advance.
Kurt

1 Like
2

This is not really a Kirby related question but general CSS knowledge.

As a hint, set float to none on the a and nav elements.

3

Thanks for the reply but I haven’t been able to make this work either. After some internet searches I see that vertical centering using CSS is actually more complicated than I thought. I agree that this is not the right place for general CSS help so I am going to try posting my question to a dedicated CSS forum. Does anyone have any leads for me on which forum to try? Perhaps this one:

Kurt

4

I don’t quite understand what you want to center vertically here and in relation to what parent element?

5

Actually, it’s horizontal centering that I am trying to achieve. Sorry about that.

Essentially, I would like to use the default theme but would like all elements centered on the page in this order (from top to bottom):

  1. logo image
  2. nav menu
  3. horizontal rule
  4. H1 page title
  5. page text
  6. horizontal rule
  7. copyright text

I am having no problems getting the page content to center (H1 and MAIN) using text-align: center in the BODY CSS. It’s really just about getting the logo and menu to center at the top of the page.

Thanks for you time.
Kurt

6

Hi @kurtg!

Center Logo like this:
.logo {
/* remove float: left; */
margin: 0 auto;
width: 2em;
margin-bottom: 40px;
}

Center Menu like this:
nav {
text-align: center;
}
.menu {
/* remove float: right; /
display: inline-block;
/ remove margin-right: -1em; */
}

center-logo-and-menu.png910×178 6.29 KB

Saludos,

Funkybrotha

7

This worked perfectly. Thank you for your guidance!

One of my main nav links at the top has some sublinks as well and they are now also center aligned. Is there any way to keep the main menu center aligned and sublinks left aligned in their box? I’ll keep playing with it to see if I can make it work but maybe you have a quick solution?

Thanks again!

Kurt