Archived topic

Top Bar Mobile Alignment

4 replies · Started by v4ncouver on November 5, 2017

Viewing posts 1–5 of 5

November 5, 2017 at 9:07 am #416592

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! :)

November 5, 2017 at 10:24 am #416630

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 :)

November 5, 2017 at 10:33 am #416635

Thanks Tom!
I am tweaking the footer menu and will implement your styles asap. :)
Enjoy the sunshine. ;)

November 5, 2017 at 10:36 am #416637

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.

November 5, 2017 at 10:40 am #416638

I just adjusted the CSS above to fix the padding :)

This archived topic is closed to new replies.

Start building better websites today.