Dawn Theme: How do I add blank space to my nav bar?

Store Design
1

What I am trying to achieve with this is to centre my menu tabs. I have put in a code that centres my menu tabs between my logo and the right side (search & cart). However, I want the tabs to be completely centred on the page.

Code for centre tabs between logo and right side:

.header {
display: flex !important;
justify-content: space-evenly;
}

My idea is that if I add blank space on the right side to make it equally wide to my logo width (230px). That will make it so that the tabs are completely centred on the page.

Please help me code this.

URL: https://pleasedontbetaken.myshopify.com/

Password: lutred

Thank you!

2

@SebastianL ,

header.header.header--middle-left.page-width.header--has-menu {
    justify-content: space-around;
}
ul.list-menu.list-menu--inline li {
    padding: 0 14px;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

1 Like
3

Thanks for your reply. Sadly this only adds space in-between the different menu tabs. I just want to add blank space to the search & cart area to make it equal to the logo width (230px).

4

@SebastianL ,

details-modal.header__search {
padding: 0 36px;
}

1 Like
5

Thank you! This is what I was looking for. Turns out it wasn’t the best solution but that’s my bad.

Edit: I changed the padding to “padding-left” in order to not get spacing between the search and cart icon.

6

@SebastianL

Solved or not?

1 Like
7

The problem I posted here is solved. Though I would need to find a better solution to put my navigation tabs at the centre of the page.

This solution adds too much space on the sides which ruins the responsiveness of the website as the tabs quickly split on to two rows when scaling down the website.

Ideally I would need a code that simply puts the navigation tabs in the centre of the page regardless of anything else. Nobody was able to solve this and that’s why I altered the problem - leading to this post which you solved.