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

Tagged: , , ,

Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
  • #25259

    Hi guys, what code would I enter and in what file to include a medium button in menu on the far right on Enfold theme? I’ll be using theme color button.

    Thanks much


    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.




    Hi Devin, you wouldn’t happen to be able to help with this would you? In mobile devices it doesn’t have to show as button it can be included in drop down just want the button there for desktop menu.

    Thanks much,




    What type of header do you have?

    I tested this on using header with bottom navigation. Edit header.php, find this code

    <?php do_action('ava_main_header'); ?>

    <div class='container'>

    Add the avia_button code below, something like this

    <a href="http://www.google.com" class="menu-button-header avia-button avia-icon_select-yes avia-color-theme-color avia-size-small" target="_blank"><span class="avia_button_icon avia-font-entypo-fontello"></span><span class="avia_iconbox_title">Click me</span></a>

    Add this on your custom.css or Quick CSS

    .menu-button-header {
    position: absolute;
    left: 300px;
    top: 62px;

    Adjust the left and top position, depends on the number of menu.




    Hi there,

    I need something similar. However, if I follow theses steps, my menu ends up below the header div.

    Is there a way to style one of the menu items as a button with CSS without modifying the header.php?



    Yes, if this can be done Ismael that would be the easiest solution. Let us know.




    Ismael, for the header I’m using the small non-fixed header.




    Just tried the suggestion and the button ended up below the div as well and bumped the menu items below div also. If you could let us know on the CSS for custom menu item that would be great.




    I got something like this, the button is there, but the text is way below the button. Could you please help to correct this :) Ismael?

    Chris, you’ll need to change the colours to work with your theme.

    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
    background-color: rgb(161, 206, 94);
    background-image: url(http://d7uu0v95k7d3j.cloudfront.net/wp-content/themes/enfold/images/layout/bg-button.png?6c6f23);
    background-position: 0px 0px;
    background-repeat: repeat-x;
    border-bottom-color: rgb(161, 206, 94);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(161, 206, 94);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgb(161, 206, 94);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgb(161, 206, 94);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.498039);
    cursor: auto;
    display: block;
    float: left;
    font-family: 'Open Sans', HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 600;
    height: 38px;
    line-height: 16.796875px;
    margin-bottom: 3px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
    max-width: 100%;
    min-width: 90px;
    outline-color: rgba(0, 0, 0, 0.498039);
    outline-style: none;
    outline-width: 0px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 10px;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px;
    vertical-align: text-top;
    zoom: 1;
    height: 50px;


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





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


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

    .menu #menu-item-2193 a {
    top: -40px;
    position: relative;




    Yes, thanks, looks good, but it breaks when I scroll down and the header resizes. Is there a way to fix that?



    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 {
    background:#a1ce5e url(http://d7uu0v95k7d3j.cloudfront.net/wp-content/themes/enfold/images/layout/bg-button.png?6c6f23) repeat-x;
    border-bottom:1px solid #a1ce5e;
    border-left:1px solid #a1ce5e;
    border-right:1px solid #a1ce5e;
    border-top:1px solid #a1ce5e;
    font:normal normal 600 14px 12px 'Open Sans',HelveticaNeue,'Helvetica Neue',Helvetica,Arial,sans-serif;
    height:30px !important;
    line-height: 19px !important;
    outline:rgba(0,0,0,0.5) none 0;
    padding:5px 16px 10px;
    text-shadow:rgba(255,255,255,0.09) 0 1px 0;
    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;
    newTopMargin = 52;
    newH = el_height/2;
    newTopMargin = 23;

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

    if(!header.length) return false;

    return false;


    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 {




    Hey, Nick! Thank you so much!

    It almost looks right, it is not aligned correctly vertically though. Would you please have a look. http://goo.gl/j5ojH


    Also, when active and hover it displays a darker line within the button.


    Hi Vitaliss,

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #menu-item-2944 .avia-menu-fx {
    display: none;
    #menu-item-2944 {
    margin-top: -8px;





    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;


    newTopMargin = 52-8;




    Thanks guys! I made the changes. It looks great on PC, but it’s broken on ipad :(



    You can use a media query to exclude ipads:

    @media only screen and (max-width: 989px) {
    #menu-item-2944 .avia-menu-fx {
    display: none;
    #menu-item-2944 {
    margin-top: -8px;





    Take a look here http://www.kriesi.at/support/topic/ (Purchase code hidden if logged out) #post-96684

    Which is a full solution for button inclusion into fix header with social media buttons. It includes some css as well for various screen sizes and you can adapt it to your button.




    Thanks everyone, I appreciate the help. Is it possible in an upcoming theme update you could include button in menu as an option so this is really simple for everyone? If so I’m sure others could really use this.




    Kriesi has quite a ‘to do’ list that he has organized in a meaningful way so though i am not positive about the very next update, it will certainly have a much higher priority than others (especially since some of the track has been laid down already above).




    Thanks Nick, that would be great :)

    Thanks again,


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

The topic ‘button in menu’ is closed to new replies.