top of page

This is how to create a custom scrollbar in Wix Studio

6 oktober 2024

|

/ Articles  -  

Velo & Code

Want to give your or your client’s website a unique touch? This simple scrollbar tweak can instantly elevate your design and create a more personalized feel.

Wix studio custom scrollbar guide

Detailed guide


  • Access your Wix Dashboard:

    Log into your Wix account and navigate to your site dashboard.

  • Open Settings: Click on Settings in the left menu.

  • Locate Advanced Settings: Scroll down to Advanced and select Custom Code.

  • Add Custom Code: Click the Add Custom Code button.

  • Paste the Code: Insert the provided code into the first textbox.

  • Apply to All Pages: Ensure the code is set to apply to all pages and is placed in the head section.


Adding custom code to Wix studio




<style>


/* To customize the scrollbar */


::-webkit-scrollbar {

    width: 12px; /* Standard width for the scrollbar */

}


::-webkit-scrollbar-track {

    background: #1B1C1D; /* Dark gray background for the scrollbar track */

}


::-webkit-scrollbar-thumb {

    background-color: #C2C2C2; /* Gray color for the scrollbar */

    border-radius: 6px; /* Rounded corners for the scrollbar */

}


::-webkit-scrollbar-thumb:hover {

    background-color: #FF4D02; /* Orange color on hover to provide visual feedback */

}


/* Reset scrollbar to default appearance when less than 750px */


@media (max-width: 750px) {

    ::-webkit-scrollbar {

        width: auto; /* Standard width for the scrollbar */

    }


    ::-webkit-scrollbar-track {

        background: none; /* No background for the scrollbar track */

    }


    ::-webkit-scrollbar-thumb {

        background-color: transparent; /* No color for the scrollbar */

    }

}


</style>


The code used is the one used on this website. If you want to change it, paste it into Chat GPT and describe what you want.


If you have any further question, you can alway write me a message.

Screenshot of design website

Your website’s homepage is trying to do too much

Your website’s homepage is trying to do too much

Web & UX Design

Mockup Chat GPT

AI bubble burst - What comes next

AI bubble burst - What comes next

Tech news

Google homescreen on a desktop

Search is becoming conversational

Search is becoming conversational

Marketing

Illustration of multiple windows

Why people don’t read your content (what they do instead)

Why people don’t read your content (what they do instead)

Web & UX Design

Linkedin company page screenshot

5 things I've learned from working with linkedin marketing

5 things I've learned from working with linkedin marketing

Marketing

2 professional website hero sections

Why your website feels cheap (even if it wasn’t)

Why your website feels cheap (even if it wasn’t)

Web & UX Design

Vill du veta
mer om mig?

Explore my work

Webbdesign

Norrklint är ett svenskt fintechbolag som hjälper små och medelstora företag att hitta finansieringslösningar. För deras varumärke arbetade jag med att ta fram en ren och modern visuell identitet som förmedlar förtroende, tydlighet och professionalism. Designen fokuserar på intuitiva gränssnitt och tydlig kommunikation, vilket gör komplex finansiell information enklare att förstå för användarna.

Norrklint

Norrklint är ett svenskt fintechbolag som hjälper små och medelstora företag att hitta finansieringslösningar. För deras varumärke arbetade jag med att ta fram en ren och modern visuell identitet som förmedlar förtroende, tydlighet och professionalism. Designen fokuserar på intuitiva gränssnitt och tydlig kommunikation, vilket gör komplex finansiell information enklare att förstå för användarna.

Tools used

Wix Studio & Recraft

Webbdesign

Karlsson Bil är en bilhandlare baserad i Varberg som köper, säljer och renoverar fordon, bland annat den exklusiva serien Lignon Scandinavia med handbyggda Land Rover Defenders.

I projektet arbetade jag med att ta fram en webbdesign som kombinerar den klassiska Defenderns arv med ett modernt och stilrent uttryck. Fokus låg på att skapa en smidig och intuitiv upplevelse där besökare enkelt kan utforska aktuella fordon, läsa om specialbyggda renoveringar och få en tydlig bild av processen kring köp och försäljning.

Karlsson bil

Karlsson Bil är en bilhandlare baserad i Varberg som köper, säljer och renoverar fordon, bland annat den exklusiva serien Lignon Scandinavia med handbyggda Land Rover Defenders.

I projektet arbetade jag med att ta fram en webbdesign som kombinerar den klassiska Defenderns arv med ett modernt och stilrent uttryck. Fokus låg på att skapa en smidig och intuitiv upplevelse där besökare enkelt kan utforska aktuella fordon, läsa om specialbyggda renoveringar och få en tydlig bild av processen kring köp och försäljning.

Tools used

Wix Studio & Custom code

Webbdesign & Branding

Carin Fredén är en Malmöbaserad fotograf med fokus på högkvalitativ företagsfotografi och visuell varumärkeskommunikation. Hennes webbplats presenterar hennes arbete och tjänster och hjälper företag att stärka sin visuella identitet genom bilder.

Carin Fredén

Carin Fredén är en Malmöbaserad fotograf med fokus på högkvalitativ företagsfotografi och visuell varumärkeskommunikation. Hennes webbplats presenterar hennes arbete och tjänster och hjälper företag att stärka sin visuella identitet genom bilder.

Tools used

Wix Studio, Figma & kod

Webbdesign

Tek-ture är ett banbrytande arkitektföretag med fokus på modern och hållbar design. För detta projekt återskapade jag deras webbplats från grunden och såg till att den behöll den ursprungliga futuristiska känslan och funktionaliteten.

Tek-ture

Tek-ture är ett banbrytande arkitektföretag med fokus på modern och hållbar design. För detta projekt återskapade jag deras webbplats från grunden och såg till att den behöll den ursprungliga futuristiska känslan och funktionaliteten.

Tools used

Wix Studio

bottom of page