Solved

Debutify Header and Announcement bar

Nickloz
Tourist
10 0 3

Hi all,

I need advice on how to make changes to the header and announcement bar height on debutify theme.

I want to make the heights smaller on mobile, I also want to move my logo from centre to being positioned on the left hand side on mobile.

site: www.buydigi.com.au

Accepted Solutions (5)

g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

@Nickloz by left-hand side, I'm assuming you want the logo right next to the menu button, is that correct?

In that case, you can add this code at the end of your CSS file (Themes -> Edit code -> Assets -> theme.scss.css):

@media screen and (max-width: 769px) {
  .header-grid .grid__item:first-child {
      width: auto !important;
  }
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@Nickloz 

Please add css code your css file .

@media screen and (max-width: 769px){
.site-header {height: 40px !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@Nickloz 

Please add this css

 

@media screen and (max-width: 769px){
.announcement-section .wrapper {position: relative;}
#announcement .rte {margin-bottom: 10px;}
#announcement {  height: 25px;}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@Nickloz 

Add this code 

@media screen and (max-width: 769px){
#announcement p {font-size: 12px !important;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

@Nickloz you can add this code to your CSS file:

 

@media screen and (max-width: 769px) {
.site-header__logo .mobile-logo {
    margin-left: -15px;
 }
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.

View solution in original post

Replies 13 (13)

dmwwebartisan
Shopify Partner
12280 2546 3693

@Nickloz 

Unfortunately, there is no simple solution for this. It would need customization.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

KetanKumar
Shopify Partner
36839 3635 11972

@Nickloz 

sorry for that issue 

i can' see this view 

KetanKumar_0-1628173786697.png

 

what do you need?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nickloz
Tourist
10 0 3

@KetanKumar I want to make the height of the announcement bar and the height of the header smaller on mobile (highlighted by the red lines). But I don't want them to change when on desktop view.

 

KetanKumar_0-1628173786697.png

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@Nickloz 

Please add css code your css file .

@media screen and (max-width: 769px){
.site-header {height: 40px !important;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Nickloz
Tourist
10 0 3

@dmwwebartisan thank you, the header size has decreased but the announced bar at the top (blue) has stayed the same. Is there any code I can put in so I can reduce the size of that too or edit it to whatever I like?

AB660468-705B-49D8-AF12-504190069F2A.png

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@Nickloz 

Please add this css

 

@media screen and (max-width: 769px){
.announcement-section .wrapper {position: relative;}
#announcement .rte {margin-bottom: 10px;}
#announcement {  height: 25px;}
}

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Nickloz
Tourist
10 0 3

@dmwwebartisan thank you so much for that, you've been a great help! Lastly, do any values in that code change the announcement bar font size? or will I need another piece of code for that (mobile only). 

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@Nickloz 

Add this code 

@media screen and (max-width: 769px){
#announcement p {font-size: 12px !important;}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

@Nickloz by left-hand side, I'm assuming you want the logo right next to the menu button, is that correct?

In that case, you can add this code at the end of your CSS file (Themes -> Edit code -> Assets -> theme.scss.css):

@media screen and (max-width: 769px) {
  .header-grid .grid__item:first-child {
      width: auto !important;
  }
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
Nickloz
Tourist
10 0 3

@g33kgirl thank you so much for that it worked!

g33kgirl
Shopify Partner
390 109 142

@Nickloz glad it worked! Please accept my answer as the solution.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
Nickloz
Tourist
10 0 3

@g33kgirl I’ve recently updated my logo to a vector file and I love the way it’s looking now, but the logo is now skewed to the right a bit, can I update the code you provided me to push it a bit more to the left? 

9EC5FBEB-CB35-49B9-965D-4BB760F4373D.png

7EDA81C3-E57A-42F3-80B2-97DBE77DD78D.jpeg

  

g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

@Nickloz you can add this code to your CSS file:

 

@media screen and (max-width: 769px) {
.site-header__logo .mobile-logo {
    margin-left: -15px;
 }
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.