How do I move the logo slightly to the right so that it is not ontop of the menu?
The logo and menu drop down works fine on the homepage but not any of our other pages
The logo is perfect on desktop view.
Thank you
Reggie
Topic summary
A user is experiencing a layout issue on mobile view where their logo overlaps the dropdown menu on the Dawn theme. The problem appears specifically on the homepage but not on other pages, while desktop view displays correctly.
Proposed Solutions:
Three community members offered CSS-based fixes:
- PageFly-Victor suggested adding custom code to the theme.liquid file before the closing tag
- GemPages recommended inserting code in theme.liquid before , specifically targeting non-index template pages
- INA_MSWEB proposed adding CSS to adjust the header heading with specific margin-left and width properties using a media query for screens up to 768px
All solutions involve editing the theme code files directly. The issue remains unresolved as the original poster has not confirmed which solution worked.
hi @ReggieBaby
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag
Hope this answer helps.
Best regards,
Victor | PageFly
Hello @ReggieBaby
I would like to give you the recommendation to support you so kindly follow steps below:
- Go to your Online store > Themes > Edit code
- Open your theme.liquid file
- Paste the below code before
{% unless template contains 'index' %}
{% endunless %}
I hope the above is useful to you.
Best regards,
GemPages Support Team
Hi @ReggieBaby
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the css file:
@media (max-width: 768px) {
h1.header__heading {margin-left: 50% !important; width: 28%;}
}
Regards,
San