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

    The button when fixed header shrinks

    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: .. 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.