Add small sticky coloured tab to screen? (no function needed) Debut help

Solved
Highlighted
Excursionist
26 0 4

Hi there,

Just looking to add a very small sticky coloured tab to my website? Currently have two websites, with a third in construction and each need a small sticky tab to indicate the different stores (all follow a coherent debut theme) the tab is a reflection on a clothes tag as the websites are selling clothing. It would be nice for it to be sticky so it's throughout the website continuously.

the main store is dogfishmen.com that needs this tab to be red as shown in the example below. 

Any help would be greatly appreciated as all the sticky articles I've found are for headers etc. I like to think this is easier than that as it's only a small shape and doesn't require any functionality either.

examples images are here:

Red tab would just need to be near the top left hand corner of the screen like so...

 Photo with desired tabPhoto with desired tabPhoto withoutPhoto without

 

Thank you!

0 Likes
Highlighted
Shopify Partner
18 3 3

add the code to theme.liquid  after the body tag 

<body>
<div class="side"></div>

 add the code below to theme.css.liquid 

.side {
  position: fixed;
  background: red;
  width: 1rem;
  height: 1rem;
  border: 3px solid black;
  padding: 15px;
  background-color: #fff;
  top: 3rem;
  left: 0;
}

 if it doesn't work for some reason or you like to tweak it feel free to reply 

1 Like
Highlighted
Trailblazer
133 29 42

This is an accepted solution.

@joedogfish Please add the following code in the theme.liquid file right before the closing body tag, which is "</body>"

 

 

<div class="sticky-tab"></div>

 

 

 

 

Then add the following code at the end of your theme.scss file

 

 

.sticky-tab {
    width: 10px;
    height: 50px;
    background-color: red;
    position: fixed;
    top: 100px;
    left: 0;
    z-index: 999999;
}

 

 

 

- Was my reply helpful? Click Like and Accept as Solution
- Want to implement a custom solution? Feel free to contact me at waqas4346@gmail.com
1 Like
Highlighted
Excursionist
26 0 4

That did work however the sizing wouldn't go below 1rem. Someone below posted an alternative that worked but I am hugely appreciative of your solution too.

Thank you so much!

1 Like
Highlighted
Excursionist
26 0 4

That worked brilliantly! Thank you so much!

 Liked and accepted!

 

Greatly appreciated.

0 Likes