Enfold : Adding Button to Fixed Header with Social Icons and Additional Nav

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,