"Change appearance or style menu item" (#1233262) / CodexThemes

Comments

Martin started the conversation
July 8, 2017 at 4:29am
Hello

I want to add a link to the menu and give it a different appearance to the other items in the menu, that is to say it has another appearance and differentiates itself from the others like the image that I attached.

I could indicate if there is a plugin or the best way to do it.

Thank you

433

Sergio replied

July 10, 2017 at 10:05am

Hi,

Pls. add follow code in functions.php your child theme

function thegem_menu_item_button($items, $args){    if($args->theme_location == 'primary' && thegem_get_option('header_layout') !== 'overlay'){        $items .= '<li class="menu-item-button"><button class="gem-button">test</button></li>';    }    return $items;
}
add_filter('wp_nav_menu_items', 'thegem_menu_item_button', 50, 2);

Then you can style this button

If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated! (How to rate).

Regards Sergio Codex.

Martin replied
July 11, 2017 at 2:31am
OK if it is what I need, but I modify the menu styles, when the sticky menu is activated the activated button does not show the total of the top of the button, attached images of its template
433
Sergio replied
July 11, 2017 at 10:16am
HI!

pls. use following css:

.site-header.fixed.shrink .nav-menu .menu-item-button .gem-button{ margin:0 25px !important; }
If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated! (How to rate).

Regards Sergio Codex.

Martin replied

July 11, 2017 at 9:53pm

Could you tell me where I put the button link in the code that you sent me

I want to put the following link: http://www.htcsaludencasa.com/customer-area

function thegem_menu_item_button($items, $args){    if($args->theme_location == 'primary' && thegem_get_option('header_layout') !== 'overlay'){        $items .= '<li class="menu-item-button"><button class="gem-button">test</button></li>';    }    return $items;
}
add_filter('wp_nav_menu_items', 'thegem_menu_item_button', 50, 2);

433

Sergio replied

July 12, 2017 at 11:45am

HI,

pls. replace with the following code

function thegem_menu_item_button($items, $args){
    if($args->theme_location == 'primary' && thegem_get_option('header_layout') !== 'overlay'){
        $items .= '<li class="menu-item-button"><a href="http://www.htcsaludencasa.com/customer-area" class="gem-button">Zona HTC</a></li>';
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'thegem_menu_item_button', 50, 2);

and use following CSS:

.menu-item-button a{
    margin:0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #b80008;
    color:#fff;
    line-height:40px !important;
}

If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated! (How to rate).

Regards Sergio Codex.