Add second header button

Hello guys,

thanks for the awesome theme. I want to add a second and third header button on the main page, which links to sub pages. But unfortunately it doesn’t work with the snippets provided.

Hello,

You can try to 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>'));
        jQuery('a.second-button.button.header-button').after(jQuery('<a href="3rdButtonLink" class="third-button button header-button">3rdButtonName</a>'));
    });
</script>

Please replace 2ndButtonLink, 2ndButtonName, 3rdButtonLink, and 3rdButtonName with desirable values.

Also you might want to add the following CSS code to improve mobile view.

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.

a.button.header-button {
    display: inline-block;
    padding: 5px 10px;
    margin: 10px;
}

div.header-image,
div.header-image img {
    min-height: 350px;
}

Kind Regards, Roman.