[Resolved] Top Bar Mobile Alignment

[v4ncouver]

Hello, fellow pressers!
I use the top bar to display a member menu that is right-aligned.

On mobile screens, it automatically centers itself because of this:

@media (max-width: 768px)
autoptimize_98f…0cca1c4a.css:7
.top-bar.top-bar-align-left, .top-bar.top-bar-align-right {
text-align: center;

What is the best way to fix this?
Do I have to override the CSS or can customizer do this?

https://www.littlecomposers.com (if you resize the browser, you’ll see right away what I mean.

Thanks! 🙂

[Tom]

Yea, we center things as that usually looks better on mobile.

You can add this CSS though:

@media (max-width: 768px) {
    .top-bar.top-bar-align-right {
        text-align: right;
    }

    .top-bar .widget_nav_menu li {
        padding: 0;
    }
}

Let me know if you need more info 🙂

[v4ncouver]

Thanks Tom!
I am tweaking the footer menu and will implement your styles asap. 🙂
Enjoy the sunshine. 😉

[v4ncouver]

OK, it’s done.

I just have to adjust the margins and/or paddings.
For some reason, in desktop mode, the top bar extends further than it does on small screens. No big deal, I am happy with the right alignment.

[Tom]

I just adjusted the CSS above to fix the padding 🙂

[Author]

Posts