Header Buttons not Centered

Support
#1

We recently launched a new site based on PRO at https://www.rockyriverwinebar.com
We are having some challenges with the header layout. There are two version of the header, one for Desktop/Laptop , one for Tablet/Mobile.

  1. On the desktop/laptop version of the navigation, the 3 buttons in the middle are not quite centered (they are shifted a bit to the left) and we are not sure why. Can you help with this?

  2. On the tablet/mobile version, there are just two buttons that are also not centered, also shifted a bit to the left. Hopefully the same fix as above will fix this. (This header is set up with a structure of 2 stacked bars)

  3. In addition, the logo and the navigation menu “open” button (wine glass) on the mobile header are not positioned where we would like. We would like to have the logo positioned near the left side of whatever the viewport size is of the device viewing the site, and similarly the logo near the right edge (much like they appear on the desktop version of the header). We have viewed this current setup of the mobile navigation on various smartphone screens and the logo and the menu button end up in various positions, including a situation where the nav menu open button is pushed off the viewport to the right. What can we adjust to fix this?

Thanks for you help!

#2

Hey Randall,

#1. It’s because of the Container margin of the buttons. Adjust it till the buttons look centered. If you want it to be centered between the logo and the button on the right, set all Container side margins to 0 included the wine button container. When aligning stuff, it’s best to use the Flex Options. You can learn more here https://theme.co/docs/use-flex-layout

#2. The right margin of the 2nd button pushes the buttons to the left. Please set it to 0.

image

#3. This is because of the Flex setup of your Bar. It’s best to learn the [Flex Layout](https://theme.co/docs/use-flex-layout) for cases like this.

Set the Align Horizontal of your Tablet Bar to Space Between.

image

image
image1077×464 125 KB

Hope that helps.

#3

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