Language Switcher Block position and styling

  • Resolved kacperludwiczak

    (@kacperludwiczak)


    7 months ago

    I added a Language Switcher Block to my header. The Block works, but I encounter two problems that I can’t solve.

    1. Position – the Language Switcher does not align to content width.
      Before adding the Language Switcher, my header composed of Site Title and Navigation worked correctly and filled the set content width.
      After adding the Language Switcher, the elements of the Navigation move away from the right side.
      How to align the Language Switcher to the right side?
    2. Styling customization – I want the Language Switcher to look and behave like the page links in the Navigation. Therefore, I have two questions:
      How to disable the effect of switcher text moving slightly down while hovering?
      Switcher text is not vertically aligned with baselines of Links in Navigation (it’s slightly lower). Can this be fixed?

    So far, I have added the below properties to Additional CSS:

    .trp-language-switcher > div{
border: 0 !important;
}

.trp-language-switcher a:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 10px;
background-color: transparent !important;
}

      I will be grateful for help on how to solve my problems.

      All the best,
      Kacper

      The page I need help with: [log in to see the link]

    Viewing 6 replies - 1 through 6 (of 6 total)
    • Thread Starter kacperludwiczak

      (@kacperludwiczak)

      Hello!
      I managed to solve second problem (switcher text moving slightly down while hovering) by adding to Additional CSS padding property.
      Now my customized code looks like this:

      .trp-language-switcher > div{
  border: 0 !important;
  padding: 2px !important;
}

.trp-language-switcher a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
  background-color: transparent !important;
}

      However, I still have a problem with the correct position of the Block in relation to the page layout.
      Below are screenshots to illustrate the situation I am struggling with:

      Does anyone have an idea how to solve this problem?

      All the best,
      Kacper

      Plugin Support Alex

      (@alexcozmoslabs)

      Hi,

      Are you using the menu language switcher block? If so, you need to know that inherits the behavior of your theme menu. So I guess, even if you put there other blocks (page/posts, whatever) the same results will be encountered. So you probably work with this issue and debugging it in the theme files as soon as is not related to our plugin.

      Thread Starter kacperludwiczak

      (@kacperludwiczak)

      Thank for response.
      I’m not using the menu Language Switcher block – I didn’t even have the option to add this block to the menu.

      I added the Language Switcher block next to my menu, grouping it with menu in a Row block.
      I also checked how the Language Switcher block behaves when you simply add it somewhere on the page and the same thing always happens – remains a distance away from the right edge of the Content Width.

      Doesn’t this indicate that the issue is related to the plugin?

      All the best,
      Kacper

      Plugin Support Alex

      (@alexcozmoslabs)

      Hi,

      Please, add the language switcher as a menu in Appearance –> Menus.

      Also, try to add it in the left side of the menu to see if the issue remains the same.

      Kind Regards,

      Thread Starter kacperludwiczak

      (@kacperludwiczak)

      Hello @alexcozmoslabs,

      I’m using the new version of WordPress with Block theme, so the traditional menu interface is no longer accessible under Appearance > Menus.
      When I try to enable Language Switcher in “Menu item” the message is displayed: “Your theme does not support navigation menus or widgets.”

      When I add the Switcher on the left side of the menu the issue remains the same.

      All the best,
      Kacper

      Larryhir

      (@larryhir)

      I have the same issue and CSS changes do not seem to affect : .trp-language-switcher

    Viewing 6 replies - 1 through 6 (of 6 total)
    • You must be logged in to reply to this topic.