0

I'm wondering if there is a possible way to create two different CTA button style in the same menu in WordPress like this example

I've tried something like that by creating two menu href and add two different [btn] style at the css, but the problem was both buttons have the same style and color if there is a possible way to escape style on the menu links ?

attached is my walker code

<?php
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$object      = $item->object;
$type        = $item->type;
$title       = $item->title;
$description = $item->description;
$permalink   = $item->url;

$active_class = '';
if( in_array('current-menu-item', $item->classes) ) {
    $active_class = 'active';
}

$dropdown_class = '';
$dropdown_link_class = '';
if( $args->walker->has_children && $depth == 0 ) {
    $dropdown_class = 'dropdown';
    $dropdown_link_class = 'dropdown-toggle';
}

 $output .= "<li class='nav-item $active_class $dropdown_class " .  implode(" ", $item->classes) . "'>";

if( $args->walker->has_children && $depth == 0 ) {
    $output .= '<a href="' . esc_url($permalink) . '" class="nav-link ' . 
 $dropdown_link_class . '" data-toggle="dropdown" aria-haspopup="true" aria- 
 expanded="false">';
}
else {
    $output .= '<a href="' . esc_url($permalink) . '" class="">';
}

$output .= $title;

if( $description != '' && $depth == 0 ) {
    $output .= '<small class="description">' . $description . '</small>';
}

  $output .= '</a>';
 }

 function start_lvl( &$output, $depth=0, $args = array() ){
$submenu = ($depth > 0) ? ' sub-menu' : '';
$output .= "<ul class='dropdown-menu $submenu depth_$depth'>";
 }

?>
0

why don't you add a class that is the permalink for example?

ie

$output .= "<li class='nav-item $active_class $dropdown_class " .  implode(" ", $item->classes) . "'>";

(this line is strange first because it's going to output "nav item $active_class $dropdown_class"...is that what you want?)

but all the same it COULD be

$output .= "<li class='nav-item $active_class $dropdown_class " .  implode(" ", $item->classes) . " " . $permalink ."'>";

Then call that class in your css

li .menu-permalink {
  background-color:blue;
}
li .menu-permalink2 {
  background-color: transparent;
}

you can apply the $permalink to whatever you like (ie li or a etc) and then change the css as needed.

3
  • sure this is not what i want, i'm editing a previous theme and i'm not the professional to understand all those codes, i tried your editing but it dosnt work, still the same – Hossam Salah May 20 '18 at 15:03
  • provide a link to your site. – rudtek May 21 '18 at 5:46
  • sorry, still on the localhost xampp server, what do you want to look for exactly so i can upload the files or get you a copy of its content – Hossam Salah May 21 '18 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.