How can I align my website's navigation menus and reduce white space?

Technical Q&A
1

Hi

This is our store: https://aben-brewery.myshopify.com/?key=833d922372516b44e26284bd8d358a2eae727eba003ed0c94dd4749055e1a25b (password:flaysk)

Two things:

  1. The top navigation menu - I’d like to right align the menu while keeping it in line with the logo (logo should stay to the left).

  2. Below the ‘Webshop - text’ I have a second menu. It’s added as a custom section. How do I align this to the centre?

Finally, there’s a lot of white space I’d like to remove / reduce between sections. How do I do that?

Many thanks

Nanna

2

@nannaarvedsen

Hi there,

Request number 1. and 3. would unfortunately be a bit more complex to solve by guiding you. It’d require some work.

To fix number 2 (center align menu):

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
@media (min-width: 749px){
.custom__linklist{
display: flex;
align-items: center;
justify-content: center;
}

}

Please let me know whether it works.

Kind regards,
Diego

3

Thanks @diego_ezfy for the quick response!

No unfortunately nothing seems to happen.

We use the Debut theme - don’t know if that makes any difference.

4

@nannaarvedsen

My apologies, there was a typo in my code. Please try again.

5

Amazing, that worked!

So it’s not that simple to reduce/remove white spacing between the sections?

Appreciate it, thanks.

6

@nannaarvedsen

Nice!

Not quite. The thing is that by removing a sections’ padding via CSS everything else will be “padding-less” as well which will cause things to unexpectedly break.

diego_ezfy_0-1612202942910.png
diego_ezfy_0-1612202942910.png1239×871 47.6 KB

In such situations, the best solution is to code an extra option within your section that would allow you to control the top/bottom spacing for each individual section, hence guaranteeing full control.

Here’s an example of what I coded to a client in her Debut theme just yesterday. In this case she needed to control only the top spacing of Rich Text sections on mobile/desktop:

diego_ezfy_1-1612203145400.png
diego_ezfy_1-1612203145400.png383×799 16 KB

Then, to reiterate, this allows you to have control of the spacing of every individual section. This type of solution requires a bit of more complex work, unfortunately it’s not copy/paste friendly otherwise I’d happily guide you through.

Hope that helps!

Kind regards,
Diego

7

Ah okay great - that’s exactly what I was looking for!

I’m new to Shopify, but how does it work; can I maybe get you to do similar for our store?

8

@nannaarvedsen

Sure thing! Can you please reach me out via email? I’ll give you further details regarding how it works:

ezfycode@gmail.com

Thanks!