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

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/

Hi @sitarakhalid ,

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

I will check it.

like this

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.

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

Hi @sitarakhalid ,

You want this:

yes sir, i use dawn theme now

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!

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

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!

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

Hi @sitarakhalid ,

Please remove code here, it will work fine:

1 Like

it’s work great, Thank you so much

1 Like