Shopify themes, liquid, logos, and UX
Hi everyone,
I am using the Dawn Theme and I am trying to make the header image also run through the navigation.
I have added a picture to show what I am looking for.
Does anyone have any suggestions on how to do that and where to place the code in the Dawn theme?
Hope to hear from someone!
Best,
Jesse
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hi KetanKumar,
Thank you for wanting to have a look!
The preview link is https://cigjfta6wbfwj1pi-56185192640.shopifypreview.com
Thanks in advance!
Best, Jesse
Hello guys,
Any update on this? Was anyone able to solve this?
sorry
@usamasaif @Myellagroup please share your details
Hi @KetanKumar
Thanks for the reply.
I'm new to the Shopify community. I hope you're asking for the preview link by the word "details".
Here's the link: https://oyqdxz872xvla8xj-15517073.shopifypreview.com
Pls let me know if there's anything else you require.
Thank you
Hello
Please paste the code in base.css file
Go to Online store -> Theme -> Action -> Edit code -> Asset -> base.css
#shopify-section-header {
position: relative;
}
.header-wrapper {
position: absolute;
background-color: transparent;
}
Thanks
It worked! Thank for that!
However, the 3 icons (search, cart, profile) moved a bit to the left. Is there a way to fix it?
Also, do you know how to change the weight of the menu text to bold so that the menu items are more visible?
Preview link:
https://oyqdxz872xvla8xj-15517073.shopifypreview.com
Okay,
please add the below code
.header {
font-weight: bold;
}
.header-wrapper {
left: 0;
right: 0;
}
Sorry for that.
just add this code . Its happening because of z-index value.
#shopify-section-header {
z-index: 9 !important;
}
That worked as well.
However, the new problem is that the titles of the other pages are overlapping with the header now :')
Also, is there a way to make the dropdown menu translucent as before (rather than thick white background so that the background images are slightly visible)?
hii, @Myellagroup
Paste this code on top of the base.css file.
.spaced-section {
margin-top: 115px !important;
}
ul.header__submenu.list-menu.list-menu--disclosure.caption-large.motion-reduce {
opacity: 0.6 !important;
}
Thank You.
Please, how do I place this code in my base.css? Can you share a screenshot pls
Hello. I am trying to set up transparent header and found this answer. I pasted the code and confirmed header is transparent. But at collection page, some of the information on collection page appears on header section. How can I fix the case?Here is the picture of the page.
can you please share store url
Hello. Thank you for your reply.
Here is URL.
https://akl-design.myshopify.com/
I added following code on the bottom of base.css file.
#shopify-section-header {
position: relative;
}
.header-wrapper {
position: absolute;
background-color: transparent;
}
Then It applied to every page such as collection page, product page. and some information of collection
and product page appears over header.
I think if I can apply the code on home page section, it works.
thanks for details
sorry but your store password protect
Ketan i've got a problem with the header section when I get on one of the menu pages.
How can i solve this?
The codes you gave are active on every page. It only should be active on the homepage i think...
https://mywoodpanels.com/pages/galerij
Hi, I am facing an issue here. I applied the code and it works fine on home page, but on the other pages also its happening the same as on home page.Pleae help on this.
same here! any solution to this?
hi can you please help me
i am facing same issue have you find any solution
facing same issue have any one find its solution.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024