If you have troubles since the update to WordPress 4.5 please read this post before opening a new thread.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #20333

    How do I add a button to the Header?



    Since people asked here is how to add a button to the Fixed Header with Social Icons and Additional Navigation.

    The button http://www.clipular.com/c?9784008=vDuclwRmVGaUtEsvJE5OhIUqBHQ&f=.png

    The button when fixed header shrinks http://www.clipular.com/c?9782007=1ngiPM6XB_EChXBaoJWkUftEaSo&f=.png

    The only thing you need to add manually is the url where the button takes you, and the button’s label.


    1) In header.php find line 157 that looks like

    <!-- end container-->

    and replace it with the block below. Inside this block you will need to add the url where the button should take people who press it in place of http://URL which should be in the format: http://www.domain.com/page/ .. and also replace PRESS ME with what you want the button to say. To change the button color change avia-color-red in the css below to blue, or green, etc..

    <div class="avia-button-wrap avia-button-right" style="margin-top: 39px;" >
    <a href="HTTP://URL" class="avia-button avia-color-red avia-size-small avia-position-right ">
    <span class="avia_iconbox_title">PRESS ME</span>


    2) Open up /js/avis.js and find the function on line 809-847 called

    function avia_header_size()

    and replace that entire function with the one below

    function avia_header_size()
    var win = $(window),
    header = $('.fixed_header #header'),
    logo = header.find('.logo img'),
    elements = $('#header_main .container, .main_menu ul:first-child > li > a:not(.avia_mega_div a)'),
    el_height = $(elements).filter(':first').height(),
    isMobile = 'ontouchstart' in document.documentElement,
    scroll_top = $('#scroll-top-link'),
    element_button = $('.avia-button-wrap.avia-button-right'),
    set_height = function()
    var st = win.scrollTop(), newH = 0, newTopMargin =0;

    if(st < el_height/2)
    newH = el_height - st;
    newTopMargin = 39;
    newH = el_height/2;
    newTopMargin = 10;

    elements.css({height: newH + 'px', lineHeight: newH + 'px'});
    element_button.css({'margin-top': newTopMargin + 'px'});

    if(!header.length) return false;

    return false;


    3) Add this css to you /css/custom.css or to Quick CSS

    .main_menu {
    right: 80px;
    .avia-button-right {
    display: inline-block;
    left: 28px;
    position: relative;
    float: right;
    @media only screen and (max-width: 767px) {
    .avia-button-right {
    left: initial;
    position: absolute;
    top: 89px;
    right: 9px;

    That’s it.


Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Enfold : Adding Button to Fixed Header with Social Icons and Additional Nav’ is closed to new replies.