Custom button in header

Support
#1

Hi, I was wondering how I could get a custom button in my header that will also scroll down the page? Something like in the picture but I would like just the button to scroll down the page and not the header. How can i get a custom button in there?

#2

Hello Daniel,

Thanks for writing in!

You can edit your menu in Appearance > Menus and then remove the “Services” menu item. Add a custom menu item called “Services” and insert #services as the href or link of the menu item. As I understand, you want to have a one page navigation for your homepage. Perhaps this knowledge base article maybe able to help you:

Hope this helps.

#3

Take a look at digilism.com
There they have a button in the header that scrolls down the page. I want to be able to edit the look of the button and stuff like that as well.

#4

Hello Daniel,

The example url is using a custom coded button. It is positioned as fixed so that as soon as you scroll the page, the button still have a fixed position.

If you want to have something like that, assuming that the child theme is set up, please add the following code in your child theme’s functions.php file

// Add custom fixed button
// =============================================================================
function add_custom_button() { ?>
    <div class="custom-button">
        <?php echo do_shortcode('[button type="real" shape="square" size="mini" href="#example" title="Example"]Square Button[/button]'); ?>
    </div>
<?php }
add_action('wp_footer', 'add_custom_button');
// =============================================================================

And then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.custom-button {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

We would love to know if this has worked for you. Thank you.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.