I am creating a custom section that allows you to put an image next to an embedded google map. However, whenever this section is added to a page, the styling of the header gets messed up and looks like this:
As you can see, the logo shrinks, and the menu icons become misaligned with the text. I’ve gone through this file and checked all the CSS classes and HTML included and I honestly have no idea what is causing this issue. I am using the Dawn theme.
Link to section file: https://github.com/maximilllllian/Shopify-Files
Link to store: https://central-coast-juicery.myshopify.com/?preview_theme_id=123396620386
@maximilllllian Please provide the URL of your store and if it is password protected please share the password too. Thanks
@maximilllllian You need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of base.css file.
.header__menu-item span{margin-top:0;}
.header__heading-logo{padding:0;}
1 Like
This works. Thank you.
I noticed that if I remove the {% stylesheet %} tag it seems to resolve this issue also. I was wondering if you knew why this was. I noticed most sections in dawn have their own CSS files as opposed to having {% stylesheet %} tags, which I assumed was best practice. Would making my own CSS file for this section also solve this issue?
