How to Decrease Space Between Menu Item Text In Dawn Theme?

[leighmarino]

Hi,

We’d like to increase the size of our logo but when we do so, it moves the menu items down onto another row. How can I go in and slightly decrease the spacing between menu items so there is space for all to be on one row? Thanks!

[PageFly-Richard]

HI @leighmarino

Can you share with me the page url

[oscprofessional]

Hello @leighmarino

Could you share your store URL so that I can review it?

[leighmarino]

Sure, it’s machineartmoto.myshopify.com

password: seigao

[PageFly-Richard]

Hi @leighmarino

I’m Richard Nguyen from PageFly- Free Landing Page Builder

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->base.css ->paste bellow code in top of file

.header__menu-item .icon-caret {

right: -12px;

}

.header-wrapper .header .header__inline-menu .header__menu-item {

padding-left: 0 !important;

padding-right: 0 !important;

}

.header-wrapper .header .header__inline-menu {

margin-bottom: 25px !important;

}

.header__heading-link {

padding: 0 !important;

}

.index .header-wrapper .header.page-width {

align-items: center !important;

}

summary.header__menu-item.list-menu__item.link.focus-inset.hello {

margin-right: 20px !important;

}

Hope that my solution works for you.

Best regards,

Richard | PageFly

[leighmarino]

I tried that code and nothing has changed. Am I doing something wrong?

[PageFly-Richard]

You can try again with this code.

Follow this:

Go to Online Store->Theme->Edit code->theme.liquid->paste bellow code in tag

.header__menu-item .icon-caret { right: -12px; } .header-wrapper .header .header__inline-menu .header__menu-item { padding-left: 0 !important; padding-right: 0 !important; } .header-wrapper .header .header__inline-menu { margin-bottom: 25px !important; } .header__heading-link { padding: 0 !important; } .index .header-wrapper .header.page-width { align-items: center !important; } summary.header__menu-item.list-menu__item.link.focus-inset.hello { margin-right: 20px !important; }

Please refer to this screenshot: https://prnt.sc/afpBHc_RJbvN

[leighmarino]

This worked, thank you!

[leighmarino]

one problem tho is now the menu is no longer bottom justified and is floating higher. How can I bring it back down? This is how we used to have it:

[PageFly-Richard]

You are welcome @leighmarino

[leighmarino]

I was able to move it down a little by editing the margin:bottom to 0. If the client is OK with this I will leave it. Thank you again!

[PageFly-Richard]

@leighmarino
in the code i sent you above please remove these 2 lines

[leighmarino]

The problem now is that the menu doesn’t reach across the page like it used to. I removed the code you suggested above about align-items: center and it didn’t make a difference. How do I make it reach across the page like originally:

[PageFly-Richard]

I checked and noticed that you haven’t deleted it completely.
Because when I check on dev tool and it still shows up.
Please refer to this video: https://www.loom.com/share/bef7c63b6b1b4f4aa85d1557f2c636f8

[leighmarino]

Thanks, I removed both lines of code you suggested. What I meant was, tho, is that the menu items should stretch across the page. I originally just wanted them slightly closer together so they fit on one line, but the client would like the phone number to reach farther across the page like it was before. Also the menu and logo to be bottom justified with each other, like in this image. Is this possible?

[leighmarino]

Hi! Following up on this from yesterday. The client is still requesting that the logo and main menu be bottom justified like it was previously. Also, how can I add a little more spacing in between menu items so they reach farther across the page like this:

Thank you!

[leighmarino]

Hi,

I am still having an issue with this - the main menu should be bottom
justified with the logo and can the space be increased a little so the menu
spreads farther across the page? I tried responding to you on the thread
but not sure if you saw it.

Thank you!

[PageFly-Richard]

@leighmarino

I’m so sorry I missed your message.
First, you need to remove this code that I sent you:

And replace the deleted code by this one:

.header-wrapper .header .header__inline-menu {
margin-left: 15px !important;
}
.header-wrapper .header .header__inline-menu .header__menu-item {
margin-right: 18px !important;
}
.header-wrapper .header .header__icons {
margin-left: 10px !important;
}

[leighmarino]

That worked for the spacing, thank you! However, it still all needs to be bottom justified. Can you help me to make the main menu and logo all bottom justified with each other like it originally was in this pic:

thank you!

[leighmarino]

Thank you! Still waiting about making it bottom justified like it was
before?