[Resolved] Menu alignment

[Antwan]

Hello,

My horizontal navigation is set to align left. On the homepage I would like to center the navigation. Is there a possibility to do so with custom css?

Another menu-related question is that the sticky (hamburger-) menu on mobile is aligned to the right. How can I set the alignment of this menu to the left?

Thank you in advance,

Antwan

[Leo]

Hi there,

Can you link me to the page in question?

Thanks!

[Antwan]

Hi Leo,

I’ve solved the second question. The mobile menu was aligned to the right, because the logo was shown in the sticky version. But on the homepage I hid the logo because of the custom header. The logo is now hidden in the header, but displays in the sticky menu.

Concerning the first question, the page in question is http://aurora.zelfdodingspreventie.nl/ (password: ZDP).

Thanks!

[Leo]

Give this CSS a shot:

.home .nav-aligned-left.nav-above-header .main-navigation {
    text-align: center;
}

[Antwan]

Nope, that unfortunately doesn’t do the trick. Do you have another suggestion?

[Tom]

Give this a shot:

.home.nav-aligned-left.nav-above-header .main-navigation {
    text-align: center;
}

.home .main-navigation li {
    float: none;
    display: inline-block;
}

[Antwan]

That’s it, thank you both very much! One small issue though, the items on the sticky menu are also centered, but should preferably be aligned to the left. Would this be possible?

[Leo]

Glad we could help!

[Antwan]

Me too! 🙂 Is there a workaround for the described alignment issue on the homepage sticky menu? (“One small issue though, the items on the sticky menu are also centered, but should preferably be aligned to the left. Would this be possible?”)

[Leo]

Try this CSS:

.home.nav-aligned-left.nav-above-header .main-navigation.navigation-stick {
    text-align: left;
}

[Antwan]

That’s it! Brilliant, thanks again!

[Leo]

No problem!

[Author]

Posts