Hey @Luburic
Me again! You have reached the German community here but we can chat in English too, that's no problem!
As this is the Booster Theme, can you adjust your header bar in the Theme Editor settings? If not then you will need to implement some more coding similar to how I explained in our other thread. Unfortunately, this one will be harder than the solution in our other post.
And again, remember that this can have a knock-on effect on any other elements within the header bar for the main reason that the space within the bar is limited and you can't simply rearrange stuff within a limited space, w/o that having an adverse effect on other element especially on Mobile Responsive UI where the bar is even more limited in spacing!
If you want to program it yourself on your site then please always test it in a theme copy/test environment first and together with an expert/programmer. You can create a backup of your theme before editing the code, or restore the code if necessary. You could also hire one of our experts by sending them an email. Our experts usually respond very quickly. Changes to your theme code can also 1) negatively impact page loading speeds and 2) exclude your theme from theme updates. The following is theme-dependent, without guarantee and only serves to point you in the right direction!
To center the menu in your Shopify store's header bar and remove the box around the cart icon, you can use CSS. The HTML code you provided is a good starting point. Based on it, here are some CSS modifications you can make:
Centering the Menu:
First, ensure your logo, menu, and cart icons are distributed evenly across the header. You may need to adjust the grid system or add custom CSS. For a simple approach using CSS, you could try:
.site-header .grid--table {
display: flex;
justify-content: space-between;
align-items: center;
}
.left_menu, .site-header__icons {
flex-grow: 1;
}
.logo_part {
flex-grow: 2;
text-align: center;
}
This CSS snippet attempts to distribute the space evenly by giving the logo container a larger flex-grow value. Adjust the flex-grow values as needed to balance the spacing.
Removing the Box Around the Cart Icon:
The box around the cart icon may be coming from styling directly applied to the <a> tag or from the .fas or .fa-shopping-cart classes. Without seeing the specific CSS, I can suggest looking for styles related to these and overriding them. For example:
.site-header__cart.head_cart {
box-shadow: none;
background-color: transparent;
border: none;
}
.fas.fa-shopping-cart {
box-shadow: none;
background-color: transparent;
}
Add these styles to your theme's CSS file. This file can typically be found and edited in your Shopify admin by going to Online Store → Themes → Actions → Edit code → Assets → theme.scss.liquid or a similar file name.
Any further questions, I can defo recommend a good programmer that can assist you on your journey!
Hope that helps! 😉
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
