Disposition or alignement of widgets in top bar.

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/

Hi,

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

Lost gradient on headings, buttons...

Please advise

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

Hi,

Oups.

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

Please advise

@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;
}

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

Glad to hear :)