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

    How do I add a button to the Header?

    #107239

    Hi,

    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>
    </a>
    </div>

    ===============================================

    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;
    //header.removeClass('shadow');
    }
    else
    {
    newH = el_height/2;
    newTopMargin = 10;
    //header.addClass('shadow');
    }

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

    if(!header.length) return false;

    if(isMobile)
    {
    return false;
    }

    win.scroll(set_height);
    set_height();
    }

    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.

    Thanks,

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.