Docs

[Lobsterass]

Hi!

I’ve read your threads on custom placement of WPML language selectors and I do have child theme.

1. I want my custom colored SWE and ENG flags in my TOP BAR, next to social icons (placed as seen in 2nd attached image).
2. Search icon should be inline with nav text.
3. Remove breadcrumbs on all pages except portfolio and shop.

http://dev.monroedesign.se/hemny/

I found this code for putting flags in top bar, but it does not work for me because the flags can only link to one page.
/*
// WPML flags in top nav (NOT WORKING FULLY)
*/

&#160

Please help.

<3

[Rue Nel]

Hello There,

Thanks for writing in and the very detailed post information.

The search and cart menu icon is a bug which is being displaced when Ubermenu is active. To fix it, since the child theme is set up, please add the following code in your child theme’s functions.php file

// Custom Search Navigation when uberMenu is active
// =============================================================================
function x_navbar_search_navigation_item( $items, $args ) {
    
  if ( x_get_option( 'x_header_search_enable' ) == '1' ) {
    if ( $args->theme_location == 'primary' ) {

      if ( ! class_exists( 'UberMenu' ) ) {

        $items .= '<li class="menu-item x-menu-item x-menu-item-search">'
                  . '<a href="#" class="x-btn-navbar-search">'
                    . '<span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span class="x-hidden-desktop"> ' . __( 'Search', '__x__' ) . '</span></span>'
                  . '</a>'
                . '</li>';
      } else {
        $items .= '<li class="ubermenu-item ubermenu-item-level-0 x-menu-item x-menu-item-search">'
                  . '<a href="#" class="ubermenu-target x-btn-navbar-search">'
                    . '<span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span class="x-hidden-desktop"> ' . __( 'Search', '__x__' ) . '</span></span>'
                  . '</a>'
                . '</li>';
      }
    }
  }

  return $items;

}
add_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_item', 9998, 2 );
// =============================================================================

// Custom Cart menu when uberMenu is active
// =============================================================================
function x_woocommerce_navbar_menu_item( $items, $args ) {

  if ( X_WOOCOMMERCE_IS_ACTIVE && x_get_option( 'x_woocommerce_header_menu_enable' ) == '1' ) {
    if ( $args->theme_location == 'primary' ) {

      if ( ! class_exists( 'UberMenu' ) ) {

        $items .= '<li class="menu-item x-menu-item x-menu-item-woocommerce">'
                  . '<a href="' . x_get_cart_link() . '" class="ubermenu-target x-btn-navbar-woocommerce">'
                    . x_woocommerce_navbar_cart()
                  . '</a>'
                . '</li>';
      } else {
        $items .= '<li class="ubermenu-item ubermenu-item-level-0 menu-item x-menu-item x-menu-item-woocommerce">'
                  . '<a href="' . x_get_cart_link() . '" class="x-btn-navbar-woocommerce">'
                    . x_woocommerce_navbar_cart()
                  . '</a>'
                . '</li>';
      }
    }
  }

  return $items;

}
add_filter( 'wp_nav_menu_items', 'x_woocommerce_navbar_menu_item', 9999, 2 );
// =============================================================================

You must remove the flags from your menu. To do that, please go to WMPL > Languages and unassign the flags in the menu.

And to align your language flags in the topbar next to the social icons, please add the following css code in your child theme’s style.css

.site .x-topbar .p-info {
    text-align: right;
    width: calc(100% - 120px);
}

And to remove the breadcrumb anywhere in your site except the portfolio and the shop page, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

body:not(.post-type-archive-product) .x-breadcrumb-wrap,
body:not(.post-type-archive-product) .x-breadcrumbs,
body:not(.page-template-template-layout-portfolio) .x-breadcrumb-wrap,
body:not(.page-template-template-layout-portfolio) .x-breadcrumbs {
    display: none;
}

I am just not sure of the portfolio page because I couldn’t find it in your site.

Hope this helps. Please let us know how it goes.

[Lobsterass]

Hi!

Thanx for the promt and detailed help:). I have done all of the things you suggested but I’m not getting it to work for some reason.

1a. CUSTOM FLAGS IN TOP BAR:
The flags are still in my main menu no matter what menu I try assigning it to. I can’t select top bar as a widget in Cornerstone and WPML seems to force me to select a menu. What should be selected now? Please see attached image of WPML settings.

1b. CUSTOM FLAGS ARE USHARP WHEN ENLARGED TO THEIR UPLOADED SIZE 20x27px
I used this css and it made them blurry:
/*
// WPML flags size
*/
.menu-item-language img.iclflag {
height: 20px !important;
width: 27px !important;
}
/*

2. SEARCH ICON INLINE IN NAV MENU
Search icon is still below nav menu. I’m suspecting the flags are bumping them down cuz the icon became grey(?).

3. BREADCRUMBS ONLY ON PORTFOLIO AND SHOP ENTRIES
That CSS seem to remove breacrumbs everywhere. Here are the pages which should have breadcrumbs:
ALL PORTFOLIO ENTRIES: http://dev.monroedesign.se/projekt/sodra-stations-naprapatklinik-5/
ALL SHOP ENTRIES: http://dev.monroedesign.se/shop-vaggdekor/dykare-vaggdekor-brandslackare/

Thank you for hanging in there with me! 🙂
<3

[Lobsterass]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates!

1a and 2] I have fixed the issue in your menu. I did reset the default WPML values and disabled the flags from your menu. I guess this issue was already resolved. I haved also updated the codes in your child theme’s functions.php file. This is the final code:

// Custom Search Navigation when uberMenu is active
// =============================================================================
function x_navbar_search_navigation_item( $items, $args ) {
if ( x_get_option( 'x_header_search_enable' ) == '1' ) {
if ( $args->theme_location == 'primary' ) {
if ( ! class_exists( 'UberMenu' ) ) {
$items .= '<li class="menu-item x-menu-item x-menu-item-search">'
. '<a href="#" class="x-btn-navbar-search">'
. '<span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span class="x-hidden-desktop"> ' . __( 'Search', '__x__' ) . '</span></span>'
. '</a>'
. '</li>';
} else {
$items .= '<li class="ubermenu-item ubermenu-item-level-0 x-menu-item x-menu-item-search">'
. '<a href="#" class="ubermenu-target x-btn-navbar-search">'
. '<span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span class="x-hidden-desktop"> ' . __( 'Search', '__x__' ) . '</span></span>'
. '</a>'
. '</li>';
}
}
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_item', 9998, 2 );
// =============================================================================
// Custom Cart menu when uberMenu is active
// =============================================================================
function x_woocommerce_navbar_menu_item( $items, $args ) {
if ( X_WOOCOMMERCE_IS_ACTIVE && x_get_option( 'x_woocommerce_header_menu_enable' ) == '1' ) {
if ( $args->theme_location == 'primary' ) {
if ( ! class_exists( 'UberMenu' ) ) {
$items .= '<li class="menu-item x-menu-item x-menu-item-woocommerce">'
. '<a href="' . x_get_cart_link() . '" class="x-btn-navbar-woocommerce">'
. x_woocommerce_navbar_cart()
. '</a>'
. '</li>';
} else {
$items .= '<li class="ubermenu-item ubermenu-item-level-0 menu-item x-menu-item x-menu-item-woocommerce">'
. '<a href="' . x_get_cart_link() . '" class="ubermenu-target x-btn-navbar-woocommerce">'
. x_woocommerce_navbar_cart()
. '</a>'
. '</li>';
}
}
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'x_woocommerce_navbar_menu_item', 9999, 2 );
// =============================================================================
// Custom display of WPML flags
// =============================================================================
function custom_language_selector_flags(){
$languages = icl_get_languages('skip_missing=0&orderby=code');
$output = '';
if(!empty($languages)){
foreach($languages as $l){
$output .= '<a href="'.$l['url'].'">';
$output .= '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
$output .=  '</a>';
}
}
return $output;
}
// =============================================================================
// Add WPML flags before the social icons
// =============================================================================
function x_social_global() {
$facebook    = x_get_option( 'x_social_facebook' );
$twitter     = x_get_option( 'x_social_twitter' );
$google_plus = x_get_option( 'x_social_googleplus' );
$linkedin    = x_get_option( 'x_social_linkedin' );
$xing        = x_get_option( 'x_social_xing' );
$foursquare  = x_get_option( 'x_social_foursquare' );
$youtube     = x_get_option( 'x_social_youtube' );
$vimeo       = x_get_option( 'x_social_vimeo' );
$instagram   = x_get_option( 'x_social_instagram' );
$pinterest   = x_get_option( 'x_social_pinterest' );
$dribbble    = x_get_option( 'x_social_dribbble' );
$flickr      = x_get_option( 'x_social_flickr' );
$github      = x_get_option( 'x_social_github' );
$behance     = x_get_option( 'x_social_behance' );
$tumblr      = x_get_option( 'x_social_tumblr' );
$whatsapp    = x_get_option( 'x_social_whatsapp' );
$soundcloud  = x_get_option( 'x_social_soundcloud' );
$rss         = x_get_option( 'x_social_rss' );
$output = '<div class="x-social-global">';
// WPML code here
$output .= custom_language_selector_flags();
if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $github )      : $output .= '<a href="' . $github      . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon="" aria-hidden="true"></i></a>'; endif;
if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
$output .= '</div>';
echo $output;
}
// =============================================================================

3] Oh sorry. I haven’t included the portfolio and product pages as well. To save you from trouble, I have updated the code and use this instead:

body .x-breadcrumb-wrap,
body .x-breadcrumbs {
display: none;
}
body.post-type-archive-product .x-breadcrumb-wrap,
body.post-type-archive-product .x-breadcrumbs,
body.page-template-template-layout-portfolio .x-breadcrumb-wrap,
body.page-template-template-layout-portfolio .x-breadcrumbs,
body.single-x-portfolio .x-breadcrumb-wrap,
body.single-x-portfolio .x-breadcrumbs,
body.single-product .x-breadcrumb-wrap,
body.single-product .x-breadcrumbs {
display: block;
}

Please do check your page now. If you need anything else we can help you with, don’t hesitate to open another thread.

[Lobsterass]

How awesome are you Rue?! Thank you so much. Great service! 🙂 I’m ALMOST there.

1a. FLAGS IN TOP BAR
Cool!

2. SEARCH ICON
Search icon looks right (yeah!) but it doesn’t work clicking on it anymore.

3. BREADCRUMBS ONLY ON PORTFOLIO AND SHOP ENTRIES
Perfect! Exactly how I want it.

Thank you so much! This is getting great!

<3

[Rue Nel]

Hello There,

Thanks for the updates! For the search icon, there seems to be a script that prevents the search overlay from displaying on the page. You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Please let us know how it goes.

[Lobsterass]

Hi Rue!

Yeah, you were right. Deactivativating Woo and WPML totally broke the site. Just reactivating them seems to have done the trick. Weird! Well, search icon works now and I’m happy.

Thank you for your awesome help!

<3

[Thai]

If you need anything else please let us know.

[Author]

Posts