top of page

How to Add Custom CSS to Wix Studio

Updated: Oct 10

illustration about how to add css to Wix Studio

In the ever-evolving digital landscape, website customization is key to standing out. While Wix Studio provides a plethora of built-in design options, sometimes you need that extra bit of customization that only CSS can offer. Adding custom CSS to your Wix Studio site can elevate its aesthetics and functionality, allowing for a unique, tailored user experience. This guide will walk you through the process of adding custom CSS to your Wix Studio site.

Why Add Custom CSS?

Custom CSS (Cascading Style Sheets) allows you to modify the look and feel of your website beyond the default options provided by Wix Studio. With CSS, you can:

  • Personalize the Appearance: Change colors, fonts, and layout to match your brand’s identity.

  • Enhance Responsiveness: Improve how your site looks on different devices and screen sizes.

  • Add Unique Features: Implement hover effects, transitions, animations, and more.


Step-by-Step Guide to Adding Custom CSS in Wix Studio

1. Access the Wix Studio Editor

Start by logging into your Wix account and opening your site in the Wix Studio Editor.



2. Enable Developer Tools

To add custom CSS, you need to enable the Developer Tools in Wix Studio:

  • Click on the Settings tab in the left-hand menu.

  • Select Advanced Settings.

  • Toggle on the Developer Tools option.


3. Open the CSS Editor

Once Developer Tools are enabled, follow these steps to add your custom CSS:

  • Click the Code icon on the left side of the Editor.

  • If this is your first time, click Start Coding.

  • Click CSS to open the CSS panel.


4. Add CSS Classes

Now you can enter your custom CSS code. Here's how:

  • Select the relevant element on the canvas.

  • Make sure the CSS panel is open on the left.

  • Select the class you want to customize from the available options under Global classes or add your own class under Custom classes.

  • Paste your CSS code into the provided text box.


5. Customize Specific Parts of Elements

In Wix Studio, elements are divided into semantic classes so you can customize individual parts. For example, horizontal menus have several CSS classes:


  • .horizontal-menu: The entire horizontal menu element.

  • .horizontal-menu_item: The individual menu items.

  • .horizontal-menu_item-label: The labels on the menu items.

  • .horizontal-menu_submenu-container: The container for submenu items.


Choose the class you want to modify, and it will be automatically added to the code.




6. Save and Publish

After adding your CSS code:

  • Preview your site to ensure the CSS is working as expected.

  • Once you are satisfied with the changes, click Publish to make them live.


Examples


Easy Example: Changing Horizontal Menu Background Color

In this example, we will change the background color of all horizontal menu items and the text color to blue. This is a simple way to make your menu items stand out and match your website’s color scheme.


Here is the CSS code that accomplishes this:



.horizontal-menu__item {
 background-color: #3498db; /* Change to your desired color */
 color: #fff
}

Result:

Example 1 - CSS  - before
Example 1 - CSS  - after



Mid-Level Example: Adding Hover Effects and Custom Font to Menu Items

In this example, we will add a hover effect that scales the menu item and changes the background color when hovered over. Additionally, we will apply a custom font to the menu labels. This will enhance the interactivity and visual appeal of your menu.


Here is the CSS code that accomplishes this:



.horizontal-menu__item {
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.horizontal-menu__item:hover {
    transform: scale(1.1); /* Scale item on hover */
    background-color: #3498db; /* Change background color on hover */
}

.horizontal-menu__item-label {
    font-family: 'Roboto', sans-serif; /* Apply custom font 'Roboto' */
    color: #000;
}

.horizontal-menu__item-label:hover {
    color: #3498db; /* Change text color on hover */
}

Result:

Mid level Example screenshot - Css

Complex Example: Customizing Submenu Items with Animations

In this example, we will customize the menu items of a horizontal menu. We will apply a blur effect to the menu items, which will be removed when the items are hovered over. The submenu items will also be styled to appear with a smooth transition. When the main menu item is hovered over, the submenu items will smoothly transition into view, changing their opacity and position.



Here is the CSS code that accomplishes this:



/* Style for the submenu container */
.horizontal-menu__submenu-container {
    background-color: #f1f1f1; /* Light gray background for the submenu */
    border-radius: 5px; /* Rounded corners for the submenu container */
    overflow: hidden; /* Ensure content does not overflow outside the container */
    padding: 10px; /* Add padding around the submenu container */
}

/* Initial style for menu items */
.horizontal-menu__item {
    padding: 5px 10px; /* Padding inside each menu item */
    filter: blur(5px); /* Apply blur effect to menu items */
    transition: filter 0.3s ease, transform 0.3s ease; /* Smooth transition for blur effect and position */
    background-color: #ffffff; /* White background for menu items */
    border-radius: 3px; /* Rounded corners for menu items */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for menu items */
}

/* Hover style for menu items */
.horizontal-menu__item:hover {
    filter: blur(0); /* Remove blur effect on hover */
    transform: scale(1.05); /* Slightly scale the item on hover */
    background-color: #ffffff; /* Change background color on hover */
}

/* Initial style for submenu items */
.horizontal-menu__submenu-container .horizontal-menu__item {
    opacity: 0; /* Initially hide submenu items */
    transform: translateY(-20px); /* Position submenu items above their default position */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transition for opacity and position */
}

/* Show submenu items when hovering over the main menu item */
.horizontal-menu__item:hover .horizontal-menu__submenu-container .horizontal-menu__item {
    opacity: 1; /* Make submenu items visible */
    transform: translateY(0); /* Move submenu items to their default position */
}

Result:

Complex example result - css

These examples demonstrate the flexibility of custom CSS in Wix Studio, allowing you to enhance your site's design and interactivity.


Conclusion: Add Custom CSS to Wix Studio

Adding custom CSS to your Wix Studio site allows you to achieve a level of design and functionality that goes beyond standard templates. Whether you want to change the background color of menu items, add sophisticated hover effects, or create complex animations for submenu items, custom CSS provides the tools you need to make your website truly unique.


For further assistance or advanced customization, contact CodeMasters Agency. We're here to help you transform your website into a visually stunning and highly functional masterpiece.


Ready to elevate your website? Contact CodeMasters Agency today!


Happy styling!


Sign up for free and unlock over $300 in exclusive deals on top SaaS tools like LinkedIn credits, QuickBooks, SEMrush, and more! Explore Deals


bottom of page