Adding a cart button to the navigation menu

Hi there,

I am new to Webflow but after reading this page:

It seems adding a cart to your nav menu is easy but it doesn’t let me. I can see you can create your own nav bar and add it but why can’t you add it to the built in nav bar as per the page above?


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

Hej @Webbieads.

If you could please share the read-only link to your site I would gladly look into it and help you.

https://preview.webflow.com/preview/helen-thorp-art?utm_medium=preview_link&utm_source=designer&utm_content=helen-thorp-art&preview=7ee2cedf69b41c4f14445c17dfd177df&mode=preview

1 Like

Ah i see the issue here. You can’t drag and drop elements into a symbol unless the symbol Is opened at the time.

Do this:

  1. Double click the navbar

  2. Now that the navbar symbol is opened, drag the cart element into the navbar.

  3. Done

Unfortunately, it does not let me do that. It says “Cart cannot be placed in a nav menu” - please see attached screenshot.

Okay i understand. You can’t place a cart inside of the native navbar menu because the menu collapses into a “mobile menu” with a hamburger icon when viewed o smaller screens (phones). This is probably so that the menu remains responsive when switching to mobile breakpoint.

Place the cart inside of the container instead as I did. Check out the screenshot

1 Like

Ok, many thanks for your help, I will have a play about with that :grin:

I have been trying to add the cart to my menu now for the past hour and a half. I have researched, watched videos and it does not work the way that it says it should. I made the nav bar a symbol, double clicked and tried to add and that doesnt work. I tried adding the div block and placing it at the bottom of the container and that kinda works but it does not format to the right of the menu bar. I can’t understand how something so simple can be taking so long. Please help https://preview.webflow.com/preview/amy-kavs?utm_medium=preview_link&utm_source=designer&utm_content=amy-kavs&preview=409513666325032a825016900af33bf8&workflow=preview

Hi Phil,

Perhaps you’ve already found the solution on your problem but I had the same thing going on as you. So what I did was put the “position” of the cart on “relative” and then moved it all the way to the right. A bit out of the box but worked fine for me.

Please let me know if you’ve found another way to fix this. :slight_smile: