Header Title on a box with a transparency degree

Dear Kharis

Hi, I have two questions:

  1. To have a line of a text on the header video, you send me the following code several months later to insert on Appearance - > Custom javaScript. is there any way to have a color box with a transparency degree under this line of text?
    (function($){
          
        "use strict"

      if( $('body').hasClass('home') ) {
        
        var mainTitle    = 'all WINNERS are DREAMERS';
        var subTitle     = 'Make your dream come true';
        var buttonURL    = '#';
        var buttonLabel  = 'Contact us';
        
        var heroContent  = '<div class="slide-inner">';
            heroContent += '<div class="contain text-slider">';
            heroContent += '<h2 class="maintitle">'+mainTitle+'</h2>';
            heroContent += '<p class="subtitle">'+subTitle+'</p>';
            heroContent += '</div>';
            heroContent += '<a href="'+buttonURL+'" class="roll-button button-slider" target="_top">'+buttonLabel+'</a>';
            heroContent += '</div>';

        $('.sydney-hero-area').append(heroContent);

      }  

    })(jQuery);
  1. How about the main menu for the website? I mean is there possible to have a color box or frame under the main menu with a transparency degree?

Thanks for your help
Kourosh

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .text-slider {
      background-color: rgba(255,255,255,0.3);
    }

    .site-header {
      background-color: rgba(255,255,255,0.3) !important;
    }

To properly use rgba color value, check this article.

Regards,
Kharis

Dear Kharis

Thank you so much for your help. You always help me professional.

have a nice day
Kourosh

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis