[Anonymous]

Anonymous

#49532

Hi everyone.

On mobile devices, my header menu items are displaying horizontally, as they would on a desktop.

However, it doesn’t look good that way; it would look better if they were vertical, like on the graphene forums page.

(Vertical on Graphene Site)

I looked through the settings, hoping to find a control for this, but I don’t think there is one.

Is there a CSS fix for this?

[Anonymous]

Anonymous

#49533

The imgur link in your post isn’t working

[Anonymous]

Anonymous

#49534

Sorry about that. Please re-try. Thanks!

[Anonymous]

Anonymous

#49535

Hm, shouldn’t it be vertical in mobile by default? If you look at the Graphene theme demo https://demo.graphene-theme.com/ on mobile, the menu is vertical as well. Could it be that you have made changes to it?

[Anonymous]

Anonymous

#49536

You were right. This was happening because I was floating my header menu right, which looked good on desktop, but was messing things up for mobile.

Do you happen to know of a safe way to float the menu right for desktop only?

[Anonymous]

Anonymous

#49538

Does this work for you?

#header-menu {
float: right
}

[Anonymous]

Anonymous

#49541

It does.

My big problem was that I was trying to float one menu item (Logo) left, and the others to the right. It seemed pretty challenging for me, so I decided to just use the header menu for mobile, and the secondary menu for desktop. (Easier)

[Peggy951]

Peggy951

#50338

If you change the orientation of the phone to horizontal, the floating with horizontal scroll, however the header occasionally gets stuck https://prepaidgiftbalance.me/