Looking for a simple way to customize your website header? In this guide, we’ll show you how to make the top menu bar transparent until scrolling in Astra without needing Astra Pro. The Astra theme is known for its flexibility and ease of customization, and this trick will help you create a sleek, modern look without additional plugins or premium versions.

By using just a small snippet of custom CSS and JS, you can transform your top menu into a transparent bar that only gains a background color once the user starts scrolling down the page. This approach enhances the user experience by keeping the navigation clean and unobtrusive while providing easy access as visitors explore your site.

Step 1: Add Custom Code to Your Functions File

To make the menu bar transparent initially and change it to solid after scrolling, you’ll need to add some code to your theme’s functions.php file. Follow these steps:

1. Access Your Theme Files:
   • Go to your WordPress dashboard.
   • Navigate to Appearance > Theme File Editor.
   • Locate the functions.php file under the Theme Files section.
2. Insert the Custom Code: Add the following code snippet at the end of the functions.php file:

function custom_transparent_header() {
    if ( !is_admin() ) {
        wp_enqueue_script( 'custom-header-scroll', get_stylesheet_directory_uri() . '/custom-header-scroll.js', array('jquery'), null, true );
        wp_enqueue_style( 'custom-header-style', get_stylesheet_directory_uri() . '/custom-header-style.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'custom_transparent_header' );
    

Step 2: Create the JavaScript File

1. Create a File Named custom-header-scroll.js:
   • Using an FTP client or file manager, create a file named custom-header-scroll.js in your theme’s directory.
2. Add the Scrolling Logic: Paste the following code into the file:

jQuery(document).ready(function($) {
    $(window).on('scroll', function() {
        if ($(this).scrollTop() > 50) {
            $('header.site-header').addClass('solid-header');
        } else {
            $('header.site-header').removeClass('solid-header');
        }
    });
});


    

Step 3: Create the CSS File

1. Create a File Named custom-header-style.css:
   • In the same theme directory, create a file named custom-header-style.css.
2. Add the Styling: Use the following CSS code:

header.site-header {
    background-color: transparent;
    transition: background-color 0.3s ease;
}

header.site-header.solid-header {
    background-color: #fff; /* Change to your preferred color */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional */
}


    

Step 4: Test the Changes

1. Clear Your Cache: After adding the files and code, clear your browser and website cache to ensure the changes take effect.
2. Preview the Website: Visit your website and scroll down. The menu bar should now start as transparent and turn solid after scrolling.

Benefits of This Custom Solution

• Cost-Effective: No need to purchase Astra Pro for this specific feature.
• Customizable: You can modify the scroll threshold, colors, and animations to match your design.
• Lightweight: The custom solution avoids adding unnecessary plugins, keeping your website fast.

With these steps, you’ve successfully added a transparent header that changes on scroll using custom functions. Enjoy your new design and enhanced functionality!

Still Not working? Contact Us