Sticky bar above the header - Venture theme

Musselin-Liebe
Tourist
5 0 4

Good Morning,

i would like to integrate a sticky header bar at the top of the website (musselin-liebe.de), above the actual header, like "Zalando.de" has. (Compare with the picture below)

Sticky header bar - ZalandoSticky header bar - Zalando

I've checked some apps like "Announcment Bar Maker" but all of these kind of apps can only create bars where the text is in the middle of the bar and not separated across the bar.

Does someone has an idea how to implement this kind of bar? 
Either via app or otherwise also gladly as code.

Thank you in advance!

 

0 Likes
Natztech
Shopify Partner
646 177 433

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

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
Musselin-Liebe
Tourist
5 0 4

The url is: https://www.musselin-liebe.de

Not password protected!

Thank you!

satsinghrana
Shopify Partner
133 11 21

Hello @Musselin-Liebe 

 

To add sticky bar on the page you need to add some html in the theme template, Then to design it some css is needed.

I have made a pretty basic structure for you give it a try, or let me know if I can do it for you below is the code.

Add it in you theme file.

 

 

<div style="text-align: center; float: left; width: 100%;">
    <div style="width: 33%; float: left; position: relative; z-index: 1; padding: 10px; background: white;">Content here</div>
    <div style="width: 33%; float: left; position: relative; z-index: 1; padding: 10px; background: white;">Content here</div>
    <div style="width: 33%; float: left; position: relative; z-index: 1; padding: 10px; background: white;">content here</div>
</div>

 

  Let me know. thanks

 

Screenshot 2021-04-26 at 7.26.48 PM.png

If helpful then please Like and Accept Solution
Hire for Custom Shopify Solutions, Apps development or Any kind of Web development work.
Contact : satsinghrana1@gmail.com
See our Shopify Apps: HERE
Musselin-Liebe
Tourist
5 0 4

Hello @satsinghrana,

thank you very much for your response and the much appreciated help!

I'm already quite happy with the result but there is just one little thing.

On the right side exists a small space that is not coloured, how can i solve this?

Space on right side.PNG

 

Actual code:

 

<div style="text-align: center; float: left; width: 100%; padding-bottom: 20px; background-color: #9cb49c">
   
     <div  class="hallo" style="width: 33%; float: left; position: relative; z-index: 1; padding: 10px; "><i class="fas fa-truck"></i> &nbsp Versandkostenfrei ab 20€</div>
      <div class="hallo" style="width: 33%; float: left; position: relative; z-index: 1; padding: 10px; "> <i class="fab fa-pagelines"></i> &nbsp 100% Musselin</div>
      <div class="hallo" style="width: 33%; float: left; position: relative; z-index: 1; padding: 10px; "> <i class="fas fa-user"></i>&nbsp Lokal handgefertigt</div>
</div>

  <style>
      .hallo {   
        background-color: #9cb49c;
        font-weight: bold;
  }
  </style>

 

 

Thank you in advance!

Best regards!

satsinghrana
Shopify Partner
133 11 21

Hi @Musselin-Liebe 

I'm not able to see the bar on your store, Can you please add it so I can check it over there. Then I'll let you know what it needs.

Thanks!

If helpful then please Like and Accept Solution
Hire for Custom Shopify Solutions, Apps development or Any kind of Web development work.
Contact : satsinghrana1@gmail.com
See our Shopify Apps: HERE
Musselin-Liebe
Tourist
5 0 4

Thank you @satsinghrana 

Should be visible now!

satsinghrana
Shopify Partner
133 11 21

Hi @Musselin-Liebe 

 

Updated code below just replace it:

<div id="bar" style="text-align: center; float: left; width: 100%; padding-bottom: 20px; background-color: #9cb49c">
   
	<div class="hallo" style="width: 33.33%;float: left;position: relative;z-index: 1;padding: 10px;"><i class="fas fa-headset" aria-hidden="true"></i> &nbsp; Persönlicher Kontakt und Beratung</div>
    <div class="hallo" style="width: 33.33%;float: left;position: relative;z-index: 1;padding: 10px;"> <i class="fas fa-user" aria-hidden="true"></i> &nbsp; Handgefertigt in Kiel</div>
    <div class="hallo" style="width: 33.33%;float: left;position: relative;z-index: 1;padding: 10px;"> <i class="fab fa-pagelines" aria-hidden="true"></i>&nbsp; 100% Musselin</div>
</div>

 

Cheers!

 

If helpful then please Like and Accept Solution
Hire for Custom Shopify Solutions, Apps development or Any kind of Web development work.
Contact : satsinghrana1@gmail.com
See our Shopify Apps: HERE
Musselin-Liebe
Tourist
5 0 4

Thank you!