Fixed Header and Navigation for Debut Theme is a common question in the Shopify community for new users. So in this tutorial, I am going to give you so easy and simple solution to make Sticky or Fixed Header in your first Shopify online store.

#ShopifyStickyNavbar #FixedHeader #DebutTheme

💻 Welcome to * Fixed Header and Navigation for Debut Theme 🚩 Shopify Sticky Navbar ✅ Solution Here*

📝 Video Description: In this video, I am you can learn How to make Shopify store header sticky.

👉 From your Shopify admin, go to Online Store Themes.
👉 Locate your Debut theme and then click Actions Edit code.
👉 In the Assets folder, open your theme.scss.liquid file.
👉 Go to the very bottom of this file and paste the following code:

📌

#SearchDrawer {
  z-index:1001;
}

#shopify-section-header {
  position: fixed;
  z-index:1000;
  left:0;
  right:0;
  -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
  background-color: {{ settings.color_body_bg }};
}

#PageContainer {
  padding-top: 80px;
}

@media screen and (max-width: 749px) {
#PageContainer {
  padding-top: 70px;
}
}

👉 In the same Assets folder, click to open your theme.js file.
👉 Go to the very bottom of this file and paste the following code:

📌

function headerSize() {
  var $headerHeight = $('div#shopify-section-header').outerHeight();
  $('#PageContainer').css('padding-top', $headerHeight);
}

$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));

If you like the video don’t forget to:

👍 Give It A Thumbs Up
🎯 Hit The Subscribe Button
👉 Don’t Forget To Share

📌 Subscribe: https://www.youtube.com/foysalahmedwe…
📌 Follow me on Facebook: https://web.facebook.com/foysalWordPr…
📌 Follow me Linkedin: https://www.linkedin.com/in/foysal-ah…
📌 Follow me Twitter: https://twitter.com/foysalwordpress
📌 Visit my website: https://www.ecommercethesis.com
📌 Visit my blog: https://foysalahmedwebdesigner.blogsp…
📌 Google My Business: https://foysalahmed.business.site/
📌 Ask me quora: https://www.quora.com/profile/Foysal-…

💻 My Services: 🚀

🔸 WordPress live support instantly
👉 https://www.fiverr.com/share/e8m9xk

🔸 Professional eye-catching website design with elementor pro page builder on WordPress
👉 https://www.fiverr.com/share/q5bX39

🔸 eCommerce Business website design with WooCommerce, Shopify
👉 https://www.fiverr.com/share/8yx7EZ

🔸 Design a WordPress website with Divi elegant theme
👉 https://www.fiverr.com/share/3eAQgA

🔸 Convert PSD to WordPress
👉 https://www.fiverr.com/share/NWeAyy

🔸 WordPress SEO with Yoast and On-Page Optimization
👉 https://www.fiverr.com/share/oWdrkg

🔸 Design SEO friendly website from scratch
👉 https://www.fiverr.com/share/6z1G6A

🎤🎤 You can also check out the below playlist: 👇

🛑 HTML Bangla Tutorial: https://bit.ly/2XTNOq4

🛑 CSS Bangla Tutorial: https://bit.ly/3amALAh

🛑 Elementor Page Builder Tutorial: https://bit.ly/2Kj7oUT

🛑 Digital Marketplace using Mayosis Theme: https://bit.ly/3eFelxq

🛑 ওয়ার্ডপ্রেস থিম কাস্টমাইজেশন : https://youtu.be/Tw0J_D7Ahz0

🛑 ফটোশপ বাংলা টিউটোরিয়াল : https://bit.ly/2zlXnEh

🛑 Make Money on YouTube 2020: https://bit.ly/3gYE9Vn

🛑 Shopify Tutorial: https://bit.ly/32LVD21

🛑 ওয়ার্ডপ্রেস থিম ডেভেলপমেন্ট : https://bit.ly/34X76P6

🛑 ই কমার্স বিজনেস / ব্যবসা বাংলাদেশ : https://bit.ly/32Rw8MV

➡️ Disclaimer:

This Channel Does Not Promote Any illegal content, all contents provided by This Channel is meant for educational purpose only. Don’t Download Or Copy Video, Thumbnail, Music, Nothing From This Channel. It’s a Cyber Crime. All Videos of this Channel are Copyrighted by Foysal Ahmed!

Thank You 🙃🙃

foysalahmed #webdesigner#wordpressdeveloper #shopifyexpert #shopifydeveloper

Tags:

How to make Shopify store header sticky,
fixed header,
sticky header,
sticky navbar,
css sticky header,
bootstrap sticky header,
css fixed header,
bootstrap table fixed header,
table fixed header,
sticky navigation,
navbar fixed,
fixed header shopify,
shopify sticky header,
sticky header shopify,
shopify fixed header,
fixed navigation bar after scroll shopify,
shopify brooklyn theme sticky header,
shopify sticky navigation,
sticky header shopify debut,
shopify sticky header scroll,
shopify minimal theme sticky header,
shopify remove sticky header,
fixed header shopify brooklyn,
sticky announcement bar shopify,
sticky navbar shopify,
shopify scrolling header,
How do you make a scrolling header sticky?,
How do I make my top bar sticky?,
How do I customize my header in Shopify?,
shopify,
shopify tutorial,
shopify support,
shopify help,