top of page

This is how to create a custom scrollbar in Wix Studio

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.

October 6, 2024

Hampus Sjöblom

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.


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.



<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>


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

You might also like

As a web designer in 2024, there are thousands of productivity tools available to help you be as effective as possible. Here are some tools and plugins that I frequently use, not necessarily daily, but it would be hard to live without them.

10 must have tools for web designers in 2024

As a web designer in 2024, there are thousands of productivity tools available to help you be as effective as possible. Here are some tools and plugins that I frequently use, not necessarily daily, but it would be hard to live without them.
Are you just starting out in web design? Avoiding common mistakes can make all the difference in creating a user-friendly site. In this guide, we’ll explore key mistakes that beginners, and even some experienced designers, often make and provide actionable tips to help you design a more effective and visually appealing website.

Beginner web design mistakes and how to fix them

Are you just starting out in web design? Avoiding common mistakes can make all the difference in creating a user-friendly site. In this guide, we’ll explore key mistakes that beginners, and even some experienced designers, often make and provide actionable tips to help you design a more effective and visually appealing website.
Choosing between Wix and WordPress for building your website depends on your specific needs and goals. This article breaks down the strengths and weaknesses of both platforms to help you make an informed decision.

Wix vs. WordPress: Which is better for your site 2024?

Choosing between Wix and WordPress for building your website depends on your specific needs and goals. This article breaks down the strengths and weaknesses of both platforms to help you make an informed decision.
Want to rank higher on Google without complicated lingo? Follow these 6 simple yet powerful SEO hacks to transform your website’s visibility and drive more traffic

6 SEO hacks to boost your Google ranking

Want to rank higher on Google without complicated lingo? Follow these 6 simple yet powerful SEO hacks to transform your website’s visibility and drive more traffic

Take action

Feel convinced yet?

Let’s make something great together! Got a project or idea? Reach out and let’s chat.

More options

Contact page

Or visit the contact page for more options to get in touch and discuss your project.

IMG_6941_edited.jpg

Explore my work

Web Design

Tek-ture is a cutting-edge architectural firm with a focus on modern and sustainable design. For this project, I recreated their website from scratch, ensuring it maintained the original futuristic feel and functionality.

Tek-ture

Tek-ture is a cutting-edge architectural firm with a focus on modern and sustainable design. For this project, I recreated their website from scratch, ensuring it maintained the original futuristic feel and functionality.

Tools used

Wix Studio

UX & User testing

Asekio is a Skåne-based tech startup with a vision to create a no-code AI website builder that can generate fully customizable websites in just 29 seconds. Users  input prompts, and Asekio handles the layout, text, and images. 

Asekio

Asekio is a Skåne-based tech startup with a vision to create a no-code AI website builder that can generate fully customizable websites in just 29 seconds. Users  input prompts, and Asekio handles the layout, text, and images.

Tools used

Figma, Figjam & Asekio

Copy & Web Design

Campus Webbyrå, a digital agency for small and medium-sized businesses, needed a website redesign to better showcase their services and enhance user engagement. The goal was to create a user-friendly, visually appealing website that effectively communicates their unique position as an agency created by students.

Campus Webbyrå

Campus Webbyrå, a digital agency for small and medium-sized businesses, needed a website redesign to better showcase their services and enhance user engagement. The goal was to create a user-friendly, visually appealing website that effectively communicates their unique position as an agency created by students.

Tools used

Wix Studio

Web Design

Campus Vänner, a non-profit organization based in Helsingborg, connects university students with local companies in the Skåne region. They needed a modernized brand identity and an enhanced online presence to appeal to their target audiences - students and businesses.

Campus Vänner

Campus Vänner, a non-profit organization based in Helsingborg, connects university students with local companies in the Skåne region. They needed a modernized brand identity and an enhanced online presence to appeal to their target audiences - students and businesses.

Tools used

Wix Studio & Photoshop

bottom of page