Need help with some design on my webshop

Hello,

I need help styling my navbar section.

In my navbar section I have a; brand logo, Container(with my nav menu) and a Top Banner with contact info and a basket.

I want the top banner to be aligned with the nav menu, without moving the nav menu.

Please see my webshop here:
https://preview.webflow.com/preview/spirituel-indretning?utm_medium=preview_link&utm_source=dashboard&utm_content=spirituel-indretning&preview=1d187d41005c794df68e3664f330f94d&mode=preview


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

Set the “Navbar” to flex.
Drag the “Top banner” into Container 2. Place it under “Nav Menu”.
Set the Container Sizing to Grow and to Display Flex, align center and justify space between.
Remove to top padding for the “Top banner”.

Done.

Hey Eli11,

Thank you so much for ur reply - much appreciated!

Tho, I still seem to have a problem. When I follow ur steps I end up having the Nav Menu “not-centered” as it was to begin with…

When you say I should drag “Top Banner” into “Container 2” - do u mean I need to create a new container or drag it into the container with “Nav Menu” and “Menu Button”?

Mabye I should add that I want the “Top Banner” to be aligned with “Nav Menu” AND be all the way to the right (opposite side of logo).

Yes, I meant dragging into the existing container.

Make the changes and publish.
Post the read-only link again if it didn’t work out as you like.

Here is my result: https://preview.webflow.com/preview/spirituel-indretning?utm_medium=preview_link&utm_source=dashboard&utm_content=spirituel-indretning&preview=e59ce11491c32254abac3e3d653eae5f&mode=preview

The menu isn’t centered anymore… :confused:

And the “Top Banner” I would like to be all the way to the right (opposite side of logo) :smiley:

Do you need all navlinks to be centered including the logo?

The logo I want to the left of the Navbar - the Nav Menu I want centered - and the Top Banner I want to the right. And Nav Menu and Top Banner I would love to be aligned. :slight_smile:

Than drag the Brand to the Container as well (above the nav menu).
Set the Container to Sizing-Shrink and 100% width and for Max width, set left Margin to 0.
Set the Sizing for Top banner and Nav menu to Shrink.

This should do the trick…

1 Like

Thank you so much Eli11!

It almost ended up as I wished for. I changed the Nav Menu sizing to Grow instead of Shrink. That made Brand and Top banner getting pushed all the way to each side of the page as I wanted it to be. The Nav Menu is still not centered as I wanted, but this solution is totally fine for now. :sunglasses:

Once again, thank you very much for ur time - really appreciated. :raised_hands:

1 Like