Main Bar Primary Menu | PenciDesign Support

PenciDesign Supporter replied

8 months ago

Staff Reply

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.

LillaGreen replied

8 months ago

Customer Reply

Hi there,

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

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?
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.

PenciDesign Supporter replied

8 months ago

Staff Reply

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.

LillaGreen replied

8 months ago

Customer Reply

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?

PenciDesign Supporter replied

8 months ago

Staff Reply

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.

LillaGreen replied

8 months ago

Customer Reply

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?

PenciDesign Supporter replied

8 months ago

Staff Reply

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.

LillaGreen started the conversation

8 months ago

Conversation Start

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