Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Top Bar Mobile Alignment

Home Forums Support Top Bar Mobile Alignment

  • This topic has 4 replies, 2 voices, and was last updated 3 years ago by Tom.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #416592
    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! 🙂

    GeneratePress 1.4
    GP Premium 1.4.3
    #416630
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #416635
    v4ncouver

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

    #416637
    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.

    #416638
    Tom
    Lead Developer
    Lead Developer

    I just adjusted the CSS above to fix the padding 🙂

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.