Header: button and text

Hi!

I really like your theme! I’m quite new to Wordpress and have a few questions about changing a few things.

  1. Can I add one more header button next to the existing one? How?
  2. Can I get the URL-link for the header button to open in a new tab/window? How?
  3. I don’t want the header text and the header button to fade away when scrolling down, can I change that? How?

Thank you so much for your help!

Hello Hanna,

1. You can do it with jQuery.

Please install and activate Insert Headers and Footers plugin that will allow you to insert JavaScript (jQuery) code.

Go to your DashboardSettingsInsert Headers and Footers → add the following code to Scripts in Header section, and click Save button:

<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('a.button.header-button').after(jQuery('<a href="2ndButtonLink" class="second-button button header-button">2ndButtonName</a>'));
    });
</script>

Please replace 2ndButtonLink and 2ndButtonName with desirable values.

Also you might want to reduce the space between buttons with the following CSS code:

.header-button {
    margin-top: 15px !important;
}

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

2. You can make your buttons links to open in a new tab by adding this jQuery code:

<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('a.button.header-button').attr('target', '_blank');
    });
</script>

The result (jQuery code that can resolve both your issues) should look like this:

<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('a.button.header-button').after(jQuery('<a href="2ndButtonLink" class="second-button button header-button">2ndButtonName</a>'));
        jQuery('a.button.header-button').attr('target', '_blank');
    });
</script>

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Regarding your third question, looks like header opacity is controlled with JavaScript, so I don’t think that there is an easy way to change that.

Kind Regards, Roman.

Hi Roman!

Is it possible for you to tell me the solution on question number three anyway?

I found this in scripts.js, but even though it seems to control the fading effect, it doesn’t. How do I turn the effect off completely?

jQuery(function($) {

    var fadeStart = 100;
    var fadeUntil = 400;
    var fading = $('.header-info');

	$(window).bind('scroll', function(){
	    var offset = $(document).scrollTop()
	    var opacity = 0;
	    if( offset <= fadeStart ){
	        opacity = 1;
	    } else if( offset <= fadeUntil ){
	        opacity = 1-offset/fadeUntil;
	    }
	    fading.css('opacity',opacity);
	});

});

Kind regards!
/Sara

Hello Sara,

As a workaround, you can try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS (WordPress 4.7 and up).

div.header-info {
    opacity: 1 !important;
}

Kind Regards, Roman.

Hi Roman, could you advise me, how to add third header button? Thank´s a lot.

Hello, sure, please check this topic:

Kind Regards, Roman.