Reduce space side menus and add items to header

Support
#1

Hello.

I’m trying to get this site finally ready and would certainly appreciate your help with these couple of things (I can’t figure them out):

  • How can I reduce the space between the logo and the menu to its left and to its right? I’d like those two menus to be a little closer to the logo. I’d also like to add more space between the right menu and the global block that has: Español English. Please see attached: (I’ve tried several things but can’t quite get it)

  • I’d also like to, on mobile view, to move the collapsed navigation (hamburger menu) to the right of the content block and in its place add an Envelope Icon that people can click to send us an e-mail. See attached:

Thanks for all your help!!

#2

Hi @Jacko_Pinto,

Inspect the BAR > Flexbox settings. Set it like this:

Inspect the middle container with LOGO. Go to MARGIN. Set right and left margin as needed:

To add space between elements, inspect the element, add right or left margin as needed.

On the thir Container, you have 3 elements, navigation inline, navigation layered(mobile menu), then content area with language switcher. Drag the Navigation Layered to the bottom of content area element and it will appear on the right/end of the container.

Add a button element in between navigation inline and content area. There’s an option to add an ICON and disable text on the settings of the button element.

Hope this helps.

#3

Thanks very much! I checked the margins and they’re all at 0… should I make them a negative number? I’d like those two “side” menus to be a lot closer to the logo than they currently are… also, are more space between the “right menu” and the Global block.

I will check the rest of your comments. Thanks very much!

#4

Hey @Jacko_Pinto,

Sorry for the confusion about the logo. Though margins and paddings could help with spacing, the most important thing to remember and take into account is the Flex layout of the Bar and Container. You need to understand how Flexbox works first. You can learn from our guide here: https://theme.co/apex/forum/t/using-flexbox/24851

If you can’t learn now, try experimenting with the Flex options. Try the setting below.

  • Set the logo’s Width and Max Width to the default values first. You can adjust this later if the menus are too close to the logo.

  • Set the Max Width of the Middle Container containing the logo instead then set Flexbox > Self Flex > Standard or No Shrink.

  • Adjust the Container’s Max Width and the Logo’s Width and/or Max Width or even side margins and paddings to get to the desired spacing.

Hope that helps.

#5

Got it. Thank you very much for all your help!

#6

You’re welcome, Jack.

#7

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