How can I add circle tabs to the top of my webpage?

Store Design
1

Please help me out, how to add circle tabs at the top of my web page like i’ve seen with some of our competitors

My website URL: https://bustangi.pk

I’ll provide a link of a website that has the look we are trying to achieve.

https://dazzlebysarah.com/

2

Hi @sitarakhalid ,

‘circle tabs’: can you explain more about it, if possible please send me screenshot.

I will check it.

3

circle.JPG
circle.JPG388×128 9.05 KB

like this

4

Hi @sitarakhalid ,

I checked the 2 demo link and didn’t find that section, are you trying to add a section like screenshot?

Please send your site and if your site is password protected, please send me the password. I will check it.

5

its show only in mobile, my website URL https://bustangi.pk

6

Hi @sitarakhalid ,

You want this:

Screenshot.png
Screenshot.png363×211 52.3 KB

7

yes sir, i use dawn theme now

8

Hi @sitarakhalid ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

#shopify-section-template--15465179644075__90ee625c-9c21-4030-85ef-6fe31484a943 .card__media {
	border-radius: 100% !important;
}
#shopify-section-template--15465179644075__90ee625c-9c21-4030-85ef-6fe31484a943 .card__media:before {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 2;
    opacity: 0.5;
    left: 0;
}
#shopify-section-template--15465179644075__90ee625c-9c21-4030-85ef-6fe31484a943 .card__content {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto !important;
    width: 100%;
    height: 100%;
}

Hope it helps!

9

it’s work but it’s show to big, i want 4 tab shows in one line

10

Hi @sitarakhalid ,

Please add code:

@media screen and (min-width: 750px){
#shopify-section-template--15465179644075__90ee625c-9c21-4030-85ef-6fe31484a943 .collection-list .grid__item {
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
}

Hope it helps!

11

thank you its work on desktop website but not in mobile screen. please help me out. Please check the screenshot, I want this look

12

Hi @sitarakhalid ,

Please remove code here, it will work fine:

Screenshot.png
Screenshot.png1059×359 31.9 KB

1 Like
13

it’s work great, Thank you so much

1 Like