[Resolved] Disposition or alignement of widgets in top bar.

Home Forums Support [Resolved] Disposition or alignement of widgets in top bar.

Home Forums Support Disposition or alignement of widgets in top bar.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1607390
    Dominique

    Hi,

    How do I align the first widget left and the second widget right in the top bar from resolution 397px to 768px?

    Please advise

    #1607395
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    @media (min-width: 397px) and (max-width: 768px) {
        .top-bar .inside-top-bar {
            justify-content: unset;
        .top-bar.top-bar-align-right .widget:first-child {
            margin-left: auto;
        }   
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #1607431
    Dominique

    Hi,

    As soon as I applied it all the CSS broke on the site.

    Lost gradient on headings, buttons…

    Please advise

    #1607437
    Dominique

    @media (min-width: 397px) and (max-width: 768px) {
    .top-bar .inside-top-bar {
    justify-content: unset;
    .top-bar.top-bar-align-right .widget:first-child {
    margin-left: auto;
    }
    }
    }

    πŸ™‚

    Yea! header finished πŸ™‚

    #1607438
    Dominique

    Hi,

    Oups.

    Sorry no the left flag isn’t sticking to the left as it should.

    Please advise

    #1607457
    cpalo

    @media (min-width: 397px) and (max-width: 768px) {
    .top-bar .inside-top-bar {
    justify-content: unset;
    }
    .top-bar.top-bar-align-right .widget:first-child {
    margin-left: auto;
    }
    }
    The first widget is align left.. it’s ok but the second widget is also align left it(s bad.
    I try something but what?
    .top-bar.top-bar-align-right .widget:nth-child (2) {
    margin-right: auto;
    }

    #1607481
    Dominique

    Hi,

    Put the missing “}” at the right place and it works great.


    @media
    (min-width: 397px) and (max-width: 768px) {
    .top-bar .inside-top-bar {
    justify-content: unset;
    }
    .top-bar.top-bar-align-right .widget:first-child {
    margin-left: auto;
    }
    }

    Finally header finished.

    Thanks

    #1608582
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.