Header, Menu, Color Overlay Customisation

Hello there,

Thank you for reaching out to us here.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.slides-container .slide-item:after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
}

.slides-container:hover .slide-item:after{
  background: rgba(0,0,0,0.25);
}

> call to action button on header slider : Is it possible to have different link ?

Please follow this thread at our support forum. It might what you are looking for.

> The menu button tends to be on the upper right side.

Try to apply the following CSS code:

.float-header #mainnav{
  margin-top: 30px;
}

Adjust the value as needed.

Regards,
Kharis

Hi Kharis Sulistiyono!

Two thumbs up! Thank you soooooo much!!!! =)

regarding the call to action button, I do have 5 picture slider and I was hoping to link each pictures to different url. is it possible? (e.g. first picture link to services page the second picture link to meet the team page)

Hello there,

In order to achieve that objective, could you please try to do the following?

1. Install and activate the Header and Footer Scripts plugin
2. Go To Settings > Header and Footer Scripts panel
3. Paste the following code into the provided “Scripts in footer:” box:

<script type="text/javascript">
(function($){

  if( $('.header-slider').length ){

    var slideLink1 = '<a href="https://yoursite.com/services"></a>';
    var slideLink2 = '<a href="https://yoursite.com/team"></a>';
    var slideLink3 = '<a href="https://yoursite.com/about"></a>';
    var slideLink4 = '<a href="https://yoursite.com/contact"></a>';
    var slideLink5 = '<a href="https://yoursite.com/projects"></a>';

    if($('.slide-item:nth-of-type(1)').length){
      $('.slide-item:nth-of-type(1)').wrapInner(slideLink1);
    }

    if($('.slide-item:nth-of-type(2)').length){
      $('.slide-item:nth-of-type(2)').wrapInner(slideLink2);
    }

    if($('.slide-item:nth-of-type(3)').length){
      $('.slide-item:nth-of-type(3)').wrapInner(slideLink3);
    }    

    if($('.slide-item:nth-of-type(4)').length){
      $('.slide-item:nth-of-type(4)').wrapInner(slideLink4);
    }    

    if($('.slide-item:nth-of-type(5)').length){
      $('.slide-item:nth-of-type(5)').wrapInner(slideLink5);
    }

  }

})(jQuery);
</script>

4. Save settings

You would clear your web browser’s cache before reloading your site to see the code take affect.

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hi Kharis Sulistiyono, I was searching earlier about this topic and fortunately I came across this forum.

It works perfectly.

Thank you for your help!