Header Design

Solved
Akhil3
Tourist
21 0 3

Hello,

 

The media version of the website's header is quite broad and big (as shown in the attached photo - 123) i would like to reduce it to the size as shown in the picture 456. Can somebody help please

 

Thanks123.jpg456.PNG

0 Likes
Akhil3
Tourist
21 0 3

i want the one that looks like in the second picture

KetanKumar
Shopify Partner
19048 1992 7023

@Akhil3 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Akhil3
Tourist
21 0 3

Thanks ketan.

 

My website URL is www.ayudaclothing.com

Also, it would be great if you could make the menu sticky.

 

thanks a lot in advance.

KetanKumar
Shopify Partner
19048 1992 7023

@Akhil3 

do you have upload ad logo or text?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Akhil3
Tourist
21 0 3

it's a text sir.

0 Likes
Natztech
Shopify Partner
918 247 665

@Akhil3  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste the below code at the bottom of the file.

@media screen and (max-width: 768px){
.template-collection  .site-header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background: #ffffff;
    top: 0;
}
.template-product  .site-header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background: #ffffff;
    top: 0;
}

.template-product .site-header .grid--table {
    height: 50px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.template-collection  .site-header .grid--table {
    height: 50px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
}

  

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
Akhil3
Tourist
21 0 3

Hello,

Thank you so much. It worked. However two problems seem to be appearing. One the top notification bar has disappeared and second the site header is covering a small portion of the picture. Attaching pictures for your reference. 

 

Really appreciate your help sir.IMG_6349.PNGIMG_6350.PNG 

0 Likes
Natztech
Shopify Partner
918 247 665

This is an accepted solution.

@Akhil3  sorry for facing this issue  remove last code and insert below code

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

@media screen and (max-width: 768px){
#shopify-section-header{
    
    position: sticky;
    top: 0;
    z-index: 1000;
    background: white;
}


.site-header .grid--table {
    height: 50px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Akhil3
Tourist
21 0 3

It worked. thank you so very much. Really appreciate your help. thanks

If you have time, could you also give me code for the desktop view ?

 

0 Likes