Inverting two widgets in top bar for tablet only

Hi there,

Try this CSS:

@media (min-width: 769px) and (max-width: 1024px) {
    .top-bar .inside-top-bar {
        flex-direction: row-reverse;
    }
}

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

Please clear and disable your caching plugin if you need further help on this.

Hi,

Worked like a charm.

Thanks

No problem :)

But the right widget , if it becomes the first, it remains aligned to the right

@see http://generatepress.simplepress.fr/

Hi cpalo,

But the right widget , if it becomes the first, it remains aligned to the right

How do you want it aligned? Do you want it on the left or center? Let us know.

I want it on the left

I want it on the left

On this CSS:

@media (max-width: 1024px) and (min-width: 769px)
.top-bar.top-bar-align-left .widget:first-child {
    margin-left: auto;
}

Replace margin-left: auto; with margin-right: auto;

You then add this CSS within the @media rule:

.top-bar-align-left .widget:nth-child(2) {
    margin-left: unset;
    margin-right: 20px;
}

So the CSS should end up with something like this:

@media (max-width: 1024px) and (min-width: 769px){
.top-bar.top-bar-align-left .widget:first-child {
    margin-right: auto;
}
.top-bar-align-left .widget:nth-child(2) {
    margin-left: unset;
    margin-right: 20px;
}
}

Thanks it's ok

No problem. :D