Setting a menu list to side-by-side

[Michelle_S]

Hello there,

I’m using the Prestashop CMS and directly editing the theme. I’m struggling with listing the menu items horizontally. It seems like a simple solution at first, but this is taking me a while and I did the display: inline-block, and float: left option but nothing seems to work.

It’ll need to look like this:

Garden Photography Architecture Photography Swag

Instead of this:

Garden Photography
Architecture Photography
Swag

Website

I’d like to know what I would need to do to fix the code. Apologies in advance if this is really a rookie mistake… I really appreciate your help!

[mayankverma]

You need to set the display property of ul to flex like this:

ul {
    display: flex;
}

This has a default direction of placing children items in a row.

Result

If you’d like to center the menu, just add this to the parent div (the one with the id="_desktop_top_menu")

display: flex;
justify-content: center;

Result

[Michelle_S]

I know it has been a while but… thank you! I appreciate your response.

When I see the dropdown under each menu, they’re placed horizontally in a line. I’d like the list to be arranged vertically. Like this:

Matte Paper
Luster Paper
Matte Paper with Frame
Luster Paper with Frame

How do I approach this?

[Michelle_S]

Hi, just bumping on this post because I’m still struggling on this one. Thanks!