How can I create space between navigation and product in the Boost theme?

[petexpress]

Hallo

wie kann ich zwischen der Navigation (breadcrumb) und dem Produkt einen Abstand hinzufügen?

how can I add a space between the navigation (breadcrumb) and the product?

Theme: boost

[Beae_Cass]

Hi @petexpress ,

Could you please share your store url and password (if enabled), so that I can help

[petexpress]

www.petexpress.ch

password : alpha

[Beae_Cass]

Hi @petexpress ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

I realize this situation isn’t exactly what you’d hope for, but I’ve got a potential solution that I’d like to share with you:

1. Go to Online Store → Theme → Edit code.

2. Open your assets/styles.css theme file.

3. Add the code at the end of the file:

.container.breadcrumbs-container {
    margin-bottom: 30px;
}

Note: You can adjust margin value to fit your store

Best regards,

Anthony

[Made4uo-Ribe]

Hi @petexpress

You can adjust the top and bottom space by adding the code below

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “styles.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

NOTE: Change the padding-top or padding-bottom to the space you want.

nav.breadcrumbs {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

• SAVE

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[petexpress]

juhu !! it worked

thank you so much

do you know the code to make the words bigger ?

[petexpress]

thank you so much ! it worked too

do you know how to make it bigger ? (the words)

[Made4uo-Ribe]

Hi @petexpress

You just need to change the number in the padding-top and padding-bottom if needed. Example: 5 in 5rem.

nav.breadcrumbs {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

[petexpress]

no.. just the space gets bigger and that workd. i am thankful for that.

but what I mean now, is that the words are way too small.. how can I change the size of it?

[Beae_Cass]

I’m happy to hear that the solution worked well for you!

Yes, you can add this code below to styles.css

ol.breadcrumbs-list {
    font-size: 15px;
}

Note: You can adjust value to fit your store

[petexpress]

thank you!!

now how can i make these bigger..(yellow marked)

[Made4uo-Ribe]

Hi @petexpress

I think you mean the word spaces. If so, please follow the instructions below

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “styles.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

NOTE: Adjust 1rem to the space you want

ol.breadcrumbs-list, li.breadcrumbs-list__item {
    gap: 1rem;
}

• SAVE

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Beae_Cass]

Yes, you can try this code below and add them to styles.css:

.breadcrumbs-prod-nav {
    font-size: 15px
}