[Resolved] Inverting two widgets in top bar for tablet only

[Dominique]

Hi,

How do I invert the two widgets positions in the top bar for tablet resolutions only?

Please advise

[Leo]

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.

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

[Dominique]

Hi,

Worked like a charm.

Thanks

[Leo]

No problem 🙂

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

[cpalo]

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

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

[Elvin]

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.

A wise man once said:
"Have you cleared your cache?"

[cpalo]

I want it on the left

[Elvin]

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

A wise man once said:
"Have you cleared your cache?"

[cpalo]

Thanks it’s ok

[Elvin]

No problem. 😀

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts