Menu and home image customisation

Can someone show how I can change the fonts and position of the menu, preferably using easy Google fonts typography, lowering the menu and how can I add text and buttons on home image as I prefer to use an image than a slider.

Thanks

Hello there,

  1. To include Google font on your site, you can use CSS @import method. In your child theme’s style.css. For instance:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

  1. To apply Google font to the main menu, add the following CSS code:

.mainnav ul li a{
  font-family: font-family: 'Open Sans', sans-serif;
}

If you haven’t been running a child theme yet, you can download it here.

To lowering the menu, apply the following CSS code:


#mainnav{
  padding-top: 20px;
}

To add a button on the homepage image, try to do the following:

  1. Install and activate the Header and Footer Scripts plugin. Go to Settings > Header and Footer Scripts.

  2. Paste the following to the “Scripts in header:” box

<style>
.img-button-wrap{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
    width: 100%;
    min-height: 260px;
    padding-top: 5px;
}    
</style>
  1. Paste the following code into the provided “Scripts in footer:” box

<script>
jQuery(function($) {

  var mainHeaderImg = $('.home .header-image');
  var ctaBtn        = '<div class="img-button-wrap">'+
                      '<a class="roll-button button-slider" href="#">Button Text</a>'+
                      '</div>';

  if ( mainHeaderImg.length ) {
    mainHeaderImg.append(ctaBtn);
  }  

});
</script>

  1. Save settings

Regards,
Kharis

Hey Kharis you are a genius. One last question, how do I insert the url I want the CTA button to link to?

Thanks a lot

Hello there,

You can replace the # symbol with any link that you want at this part href="#".

Regards,
Kharis

thanks again !!!

My pleasure!

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

Hi Kharis

I am having trouble with that link, I made the replacements you told me, but that doesn’t seem to work, maybe I am doing something wrong:

var myButton = ‘My Button’;

 $( '.text-slider-section' ).append(myButton);

});
</script>

<script>
jQuery(function($) {

var mainHeaderImg = $(’.home .header-image’);
var ctaBtn = ‘<div class=“img-button-wrap”>’+
Conocer Más’+
’</div>’;

Hello there,

Please share your site URL, so I can inspect the incorrect code you probably made.

Regards,
Kharis

Hello there,

I noticed you entered incorrect anchor target.


href="pg-126-1"

ID name doesn’t seem to exist in your homepage. Please replace it with the correct one, and precede it with #.


href="#sectionID"

To find the correct ID name attributed to particular section, you can use the web browser’s inspector tool.

Cloudup

Regards,
Kharis

Hi Kharis, thank you very much, however, I did what you told me but it did not work, what could that be?

Hello there,

From code view source, but I didn’t find the changes. Please tell me to what section should the button be associated to?

Regards,
Kharis

Hi Kharis

The section is “pg-126-0”

Tks

Hello there,

Could you please verify if that ID name does exist attributed to the section you meant?

Regards,
Kharis

Hi Kharis,

Well, I believe it does, hereby the picture of the inspector

Cloudup

but, All I want is the button to take me to the page “servicios” (page id 126), so for me the specific section is not that important

Hello there,

It is in other page. So you need to change the link to http://www.xpotencia.com/servicios/. The final code will look like this:


<script>
jQuery(function($) {

     var myButton = '<a href="http://www.xpotencia.com/servicios/" class="roll-button button-slider">My Button</a>';

     $( '.text-slider-section' ).append(myButton);

});
</script>

<script>
jQuery(function($) {

  var mainHeaderImg = $('.home .header-image');
  var ctaBtn        = '<div class="img-button-wrap">'+
                      '<a class="roll-button button-slider" href="http://www.xpotencia.com/servicios/" >Conocer Más</a>'+
                      '</div>';

  if ( mainHeaderImg.length ) {
    mainHeaderImg.append(ctaBtn);
  }  

});
</script>

Regards,
Kharis

Thanks Kharis, I just pasted the code but still not working. I am a newbie so I don’t know what else to do.

Hello there,

The code changes hasn’t yet been applied. Please clear your site cache from a caching plugin like W3 Total Cache (if any). Then reload your site.

Regards,
Kharis

Hi Kharis

I cleared the cache (using W3 total Chache) but still nothing happens with the button