[Resolved] top bar float right mobile device

[Katharina]

Hi there,

i am using de WPmobile detect plugin.
I added this to an top bar html widget:

[notphone] office@energieeffizienz.tirol      +43 (0)5253 6310[/notphone]

[phone]    [/phone]

an want to show the icons on the right side on the mobile device, but they are centered.

i tried this css:

.icon{
float:right;
}
and this one:

@media (max-width:768px).top-bar {
float:right;
padding: 0 2px 0 0;

}

but it does’nt work. Can you help 🙂
here the URL: http://www.energieeffizienz.tirol?bypass=optimal

Thank you
Katharina

[Leo]

Hi there,

The plugin shouldn’t be needed.

Check out this method: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Let me know if you need more info.

[Katharina]

Hi Leo,

thank you, this method works fine, i’m glad that i don’t need the plugin anymore.
The top-bar layout is full-width / contained / align:right. On desktop it is aligned right, but
still the icons are in the center of the mobile, i cannot find out the right css to set them on the right side. On the desktop
I gave them the class “icon”:

and tried:

.icon {
text-align: right;
}

or
.icon {
float:right;
}

i tried with no padding, no margin – nothing works.

I also tried

@media (max-width: 768px) .top-bar {
text-align:right;
}

and

@media (max-width: 768px) .top-bar {
float:right;
}

Nothing works.
Can you give me a hint?

thank you
Katharina

[Leo]

I would consider using the mobile header: https://docs.generatepress.com/article/mobile-header/

If not then try this CSS: https://generatepress.com/forums/topic/mobile-menu-alignment/#post-260447

[Katharina]

I am using the mobile header, the mobile menu works fine! I am talking about issues with the top bar.
I want the two icons on the right side, not in the center ob the mobile.

thank you
Katharina

[Leo]

Ahh I see.

Try this CSS:

@media (max-width: 768px) {
    .inside-top-bar {
        padding-right: 0;
        text-align: right;
    }
}

Let me know.

[Katharina]

perfect!

Thank you
Katharina

[Leo]

No problem!

[Author]

Posts