Top Bar on Mobile

[Matt Stern]

Hi Guys,

Can you help me format the top bar on mobile and tablet? Currently, the top bar links stack on top of each other. How can they be laid out in a single line?

Thanks!

Matt

[Leo]

Hi there,

Are you referring to the Contact Us and Cart links?

They shouldn’t be stacked on mobile.

Let me know you’ve figured it out already.

Let me know 🙂

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

[Matt Stern]

Hi Leo,

Yep, those links are correct. hmm, they are definitely stacked on my device.

[Leo]

Ahh I think that’s because you have some massive padding added on desktop.

Try this:

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

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

Let me know if this helps 🙂

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

[Matt Stern]

Thanks that does help. I have all that padding so that the right side of the top bar items line up with the right side of the main nav below.

The problem with the padding is that is pushes everything too far over on tablet and mobile. Any ideas on how to keep the top bar right aligned across devices?

[David]

Hi there,

i have edited the CSS that Leo provided here to include the text-align: right; property

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

[Author]

Posts