button in menu

Hi comlor,

You would need to modify the header.php file and wrap the button in your own custom div so that you can position it with css and then add it to the responsive layout with media queries so that you can position it for the various devices.

Regards,

Devin

If you can provide a link to the site live with the code in place we can see what can be done. Generally, there is a soft limit on customization that we are allowed to do as it tends to lead to a spiral of small fixes and continued support to keep everything working cross browser, responsive and all fully compatible.

So seeing things live is the best way to at least see what can be done :)

Regards,

Devin

HI,

@comlor We need a url at this point since it would turn into a frustrating guessing game otherwise.

@vitaliss

Here is the css to pull up the text into the button

.menu #menu-item-2193 a {

top: -40px;

position: relative;

}

Thanks,

Nick

Hi,

Ohh, I thought that was the design, lol.

Ok in that case:

1) replace the button code you are using with this (i trimmed some of the fat off it, and lot more can go i think, but ok for now):

.menu #menu-item-2193 a {

-webkit-backface-visibility:hidden;

-webkit-perspective:1000px;

background:#a1ce5e url(https://d7uu0v95k7d3j.cloudfront.net/wp-content/themes/enfold/images/layout/bg-button.png?6c6f23) repeat-x;

border-bottom:1px solid #a1ce5e;

border-bottom-left-radius:3px;

border-bottom-right-radius:3px;

border-image-outset:0;

border-image-repeat:stretch;

border-image-slice:100%;

border-image-source:none;

border-image-width:1;

border-left:1px solid #a1ce5e;

border-right:1px solid #a1ce5e;

border-top:1px solid #a1ce5e;

border-top-left-radius:3px;

border-top-right-radius:3px;

color:rgba(0,0,0,0.5);

cursor:auto;

font:normal normal 600 14px 12px 'Open Sans',HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif;

height:30px !important;

line-height: 19px !important;

margin-left:0;

margin-right:0;

min-width:90px;

outline:rgba(0,0,0,0.5) none 0;

padding:5px 16px 10px;

text-align:center;

text-decoration:none;

text-shadow:rgba(255,255,255,0.09) 0 1px 0;

top:-10px;

vertical-align:text-top;

zoom: 1

}

2) open up /js/avia.js and find block of code between lines 809-846 and replace it with this one below, they should look nearly identical but for 3 lines:

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)'),

element_button	= $('.menu #menu-item-2193 a'),

el_height       = $(elements).filter(':first').height(),

isMobile        = 'ontouchstart' in document.documentElement,

scroll_top		= $('#scroll-top-link'),

set_height      = function()

{

var st = win.scrollTop(), newH = 0, newTopMargin =0;



if(st < el_height/2)

{

newH = el_height - st;

//header.removeClass('shadow');

newTopMargin = 52;

}

else

{

newH = el_height/2;

newTopMargin = 23;

//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();

}

Ok now if you ever change the menu, when you go to a live server, you need to remember to edit line 815 which has the menu-id hardcoded in there (#menu-item-2193) and to change it, as well as change it in the css, since any new website will obviously have new ID numbers.

Check you quick css, you have a block of css commented out, dont know if accidently or on purpose starting with this block below the button code –> /*blockquote {

Thanks,

Nick

Hi,

Yes, Devin ofcourse is correct about the 8 pixels. You can also instead subtract 8px from my javascript code above in 2 lines where there are numbers 52 and 23.:

newTopMargin = 23-8;

and

newTopMargin = 52-8;

Thanks,

Nick