Tagged: , , ,

Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #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

    #126290

    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

    #126291

    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,

    Chris

    #126292

    Hi,

    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.

    Regards,

    Ismael

    #126293

    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?

    Thanks!

    #126294

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

    Thanks,

    Chris

    #126295

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

    Thanks,

    Chris

    #126296

    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.

    Thanks,

    Chris

    #126297

    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.

    .menu-item-1933{
    -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;
    }

    #126298

    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

    #126299
    #126300

    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

    #126301

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

    #126302

    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(http://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

    #126303

    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

    #126304

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

    #126305

    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;
    }

    Regards,

    Devin

    #126306

    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

    #126307

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

    #126308

    Hey!

    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;
    }
    }

    Regards,

    Peter

    #126309

    Hi,

    Take a look here http://www.kriesi.at/support/topic/full-screen-slider-image-chopped#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,

    Nick

    #126310

    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.

    Chris

    #126311

    Hi,

    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

    #126312

    Thanks Nick, that would be great :)

    Thanks again,

    Chris

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

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