[Resolved] Top Bar Alignment for Mobile

[René]

I have a sandbox site setup for testing here: http://sandbox.tableaux.com/

How can I set the Top Bar Alignment to “Center” on mobile, but keep it Right aligned on Desktop?

[Ying]

Hi there,

It looks the top bar alignment is correct.

But you have this CSS which adds padding to the menu items so it’s a bit off on mobile:

ol,ul {
 padding-left: 30px;
}

Try change it to:

ol, ul:not(.top-bar ul) {
    padding-left: 30px;
}

[René]

That worked, but it pushed my primary navigation menu over.

[Ying]

The CSS change should not affect anything outside the top bar.

And I checked your primary navigation menu, the padding still apply:
https://www.screencast.com/t/3t17HA1AFq1

[René]

Thanks for checking but it is still pushing the entire navigation to the right. See sceenvidcap:
[video src="https://tableaux.com/files/video/ScreenRecorderProject2.mp4" /]

[René]

I got it figured out. I took changed the inner header width and then took off that css code altogether and it seems to be working now.

[Tom]

Glad you got it sorted!

Another solution would be to make it so your custom CSS only applies to lists inside the content:

.site-main ol, .site-main ul {
 padding-left: 30px;
}

[Author]

Posts