Newbie problem cant align my menu

Im ready to publish but messed up my menu, cant find where to fix it
Do you know why all products (in green) is sitting above the rest of the menu?

I built this from a template and managed to break it :frowning:

Here is my site Read-Only:
(how to share your site Read-Only link)

Hey @SimonSolar2C — can you share your read-only link so the community can take a look at how you have this set up? Once we get that, we can get to the bottom of this issue for you!

See how to share your read-only link here:

Hi @SimonSolar2C, yea a read-only link would help!

It looks like the display settings (in the right side-bar under “layout”) of the “selwrap23” div are set to “block”. This means that the elements in that div will be stacked on top of each other, which in this case are the green button and the “selwrap12” collection.

Try setting the layout settings from “block” to “flex”, which is the setting right next to it. You can then set it to “horizontal”, which ensures that the two elements are side-by-side.

1 Like

Strong first post in the Webflow Community, @simonray! Your solution + explanation is correct - welcome to the community, and thanks for assisting!


Many thanks for the replies. @simonray makes lots of sense once I knew how. I do wish there was a menu wizard because I’m not done yet:
Editor View:

There must be a mistake somewhere because the editor/preview and published looks are so very different. Its sort of working but Im scared to touch it when what I see is not what I get. The published view is correct - a heading with a drop down menu on phones, but I cant see where that heading is coming from to correct its overlap of the menu, and add a symbol to show it will create a drop down.
I’ll try and share the read only version…
Published behaviour below:

Hi @SimonSolar2C. It looks like the template you are using has a bit more complexity, because it uses custom code to regulate the behaviour of the sub-menu on mobile. So to optimise it further, for example by adding a dropdown arrow to the headline, you would have to work with that custom code. I’m not sure why they used custom code is here, as this behaviour can also be done solely in webflow, but maybe there’s another reason for having it there.

Anyway, that code is the reason why the headline is not showing in the editor/preview. The headline that appears on the published site is the h3 element called “No Margin” in your document. It’s basically just the category name headline from the desktop view, it’s however hidden with custom code at the moment. The div “Shop Categories Wrapper” is the menu that appears when the headline is clicked. This div has the top margin set to -23, which is why it’s overlapping with the headline. Try changing that to 0 to see if it solves the issue for now.

Thats great it explains alot why Im struggling @simonray. ATM I cant find the special code [embed element?] which is where I understand it should be.

@SimonSolar2C you can find the custom code fields in the page settings (gear icon next to the page name). These fields are used for general code that doesn’t have to appear at particular spots in the html doc, as the code is added to the end of the body or header. The embed element is used for injecting custom code at exact spots in the doc.

1 Like

Thanks @simonray. Ive been trying to understand these menus more and hasve managed to introduce a categories menu under products in the main menu.
I watched this vid and although he didn’t finish off showing us to add links I did get it working.
Now I want to attach the drop down to the Products link not have another top menu item of categories (which is just the same thing ).
Got a bit stuck again - so close to being able to publish ! Then I want slideshow on product option images etc etc.

Would love to get rid of that hacky code discussed above but scared to break stuff.