Setting a menu list to side-by-side

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


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!

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.


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;


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?

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

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.