Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #4530121
Main Bar Primary Menu
Open

Comments

  •  12
    LillaGreen started the conversation

    Hi there,

    I’m trying to add my GTranslate language switcher (via shortcode) into my menu. What I want is to position the language switcher next to the search icon and cart icon, so that on mobile it stays fixed at the top while scrolling.

    How can I make this? See the screenshot for the position i mean.

    Thank you in advance! Tsvete

    Attached files:  Bildschirmfoto 2025-12-31 um 14.19.32.png

  •  3,057
    PenciDesign replied

    Hi,

    You should paste this code into the function.php of the child theme or via the CodeSnippet plugin here: https://wordpress.org/plugins/code-snippets/

    add_action( 'penci_header_extra_icons', function() {
    	echo do_shortcode( 'insert the shortcode at this line' );
    }, 1 );

    After adding this code, you will also need to add some additional CSS to ensure it displays correctly.

    #navigation .gtranslate_wrapper {
      float: right;
      width: auto;
      vertical-align: middle;
      margin: 20px 10px 0 10px;
    }
    .is-sticky #navigation .gtranslate_wrapper {
      margin: 10px 10px 0 10px;
    }

    Regards,
    PenciDesign.

  •  12
    LillaGreen replied

    Hi, thank you for your reply!

    The thing is that each language uses a separate shortcode switcher. At the moment, I’ve tested this on my staging site by creating a standard (empty) menu item (see attachment), and under it I’ve added all language switchers, each one inserted via its own shortcode.

    Is it possible to add this menu item to the menu bar that stays on mobile while scrolling?

    Attached files:  Bildschirmfoto 2026-01-02 um 06.54.44.png

  •  3,057
    PenciDesign replied

    Hi,

    Unfortunately, the current version of Soledad does not support this menu on mobile. You can only add it to the vertical mobile navigation.

    Regards,
    PenciDesign.

  •  12
    LillaGreen replied

    Hi, I understand. However, there should be a way to achieve this using code, right?

    Also, how can I move the search icon into the vertical mobile navigation, so there is space for the language switcher?

  •  3,057
    PenciDesign replied

    Hi,

    Please go to Appearance → Customize → Logo & Header → Vertical Mobile Navigation → turn on the "Display Search Form on Vertical Mobile Nav" option,

    Then insert this CSS code to hidden the search icon on mobile:

    @media only screen and (max-width: 961px) {
      #top-search {
        display: none;
      }
    }
    

    Regards,
    PenciDesign.

  •  12
    LillaGreen replied

    Hi there,

    Thank you for the code — it’s starting to look better and better. However, we’re still facing a few issues:

    1. When scrolling the page, the menu bar changes size on both desktop and mobile. How can we prevent any movement or resizing of the sticky header?

    2. How can we reorder the menu elements so that they appear in the following order at the end of the menu:
      Language switcher → Mini Cart → Search icon?

    Thank you in advance for your help.

  •  3,057
    PenciDesign replied

    Hi,

    1/ Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

    .is-sticky #navigation.header-10,
    .is-sticky #navigation.header-11,
    .is-sticky #navigation.header-6 {
      height: 82px;
    }
    .is-sticky #navigation.header-6 .menu > li > a,
    .is-sticky #navigation.header-6 ul.menu > li > a {
      line-height: 80px;
    }
    .is-sticky #navigation.header-10 .top-search-classes > a,
    .is-sticky #navigation.header-10 a.cart-contents,
    .is-sticky #navigation.header-11 .top-search-classes > a,
    .is-sticky #navigation.header-11 a.cart-contents,
    .is-sticky #navigation.header-6 .top-search-classes > a,
    .is-sticky #navigation.header-6 a.cart-contents,
    .is-sticky #navigation.header-6 .pcheader-icon > a,
    .is-sticky #navigation.header-6 .show-search a.close-search {
      height: 80px;
      line-height: 80px;
    }
    .is-sticky #navigation.header-6 #logo img {
      max-height: 80px;
      padding: 12px 0;
    }

    2/ Unfortunately, the current version of Soledad does not support reordering these menu items.

    Regards,
    PenciDesign.