How can I center my navigation bar text in the expanse theme?

Store Design
1

Hi

I’m currently using the expanse theme. Please could someone provide some code/solution to moving my navigation bar text to the centre? I’ve attached an example below, would it be possible to space the text the same as the example.

Screenshot 2021-08-28 at 21.31.18.png
Screenshot 2021-08-28 at 21.31.18.png2746×308 200 KB

1 Like
2

@mattaray11

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

@mattaray11

Please share your store URL.

4

Here is my store url: www.chloeandlois.com

1 Like
5

@mattaray11

Thanks for the URL but your navigation already in center in this store and this store and your screenshot above is completely different.

It is not the same store URL. Let me know.

6

Hi

I have sent you a private message with my url.

Thanks

1 Like
7

@mattaray11

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (min-width: 769px){
.site-navigation--below.site-navigation--below{
margin: 0 auto !important;
text-align: center !important;
}
}

Hope this works.

Thanks!

8

Please could you provide some code where there is a bigger space between each section, like the example I’ve attached below.

Screenshot 2021-08-28 at 21.31.18.png
Screenshot 2021-08-28 at 21.31.18.png2746×308 200 KB

1 Like
9

@mattaray11

You need to design header like this?

What about navigation center thing? is that problem solved?

10

no I would like more space/bigger gap between each title. Please could provide a solution.

11

@mattaray11

Please add the following code at the bottom of your assets/theme.css file.

.site-nav__link {padding: 16px 53px !important;}

Thanks!

12

Thanks, Please could you now provide some code do make the header a gradient, like the one I’ve attached. colours: #0072b8 , #09579d , #13438a.

Kind Regards

1 Like
13

@mattaray11

yes please try this code

.site-header__element {
background: rgb(0,114,184);
background: linear-gradient(90deg, rgba(0,114,184,1) 0%, rgba(9,87,157,1) 35%, rgba(19,67,138,1) 100%);
}