How to move the language switcher to the right - header

Hi everyone!

Unfortunately I'm not able to figure out how to move the contact tab to the left and having the language switcher to the top right side of the header instead.

Can you guys help me with a css code please?

Can you share your website URL?

Hi Ziggy!! My website is offline atm

Hello! Can you add a site wide password?

https://squarefortytwo.com/squarespace-guides/add-a-site-wide-password-to-your-squarespace-website

Done!

https://ddm-studio.com/

psw:1234

Thanks!

What plugin did you use for the split navigation?

Your best bet to have the button on the left would be to hide the button from the navigation, add the contact as a link in the navigation and then style that link to appear like a button.

I used weglot as a plugin.

I like the style of the contact button like that. Is there a way to just simply move them?

Thanks

I also tried to do what you suggested, but how can I style the contact link as a button?

Thanks

Amazing! Thank you! It worked!

Can you tell me how can I group the service with home and portfolio please?

Just now, DarioDiMaggio said:

Can you tell me how can I group the service with home and portfolio please?

That's a good question. I don't know the answer because I don't know how you set up the split navigation, i.e. with some links on the left and some on the right, this, as far as I'm aware, isn't a feature, and needs coding, can you shed any light? Where did you place the new Contact link?

This is the coding I added before yours:

.header-actions .header-nav-item {
  padding-right:2.1vw !important; /**change as needed**/

}

.header-nav-list   {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end !important;
      -ms-flex-pack:end !important;
          justify-content:flex-end !important;
  .header-nav-item {
     padding-right:2.1vw !important; /**change as needed**/
  }
}

.header-actions--right {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
}

.header-actions .header-nav-item {
  padding-right:2.1vw !important;//change as needed

}

.header-nav-list   {
  display:flex;
  justify-content:flex-end !important;
  .header-nav-item {
     padding-right:2.1vw !important; //change as needed
  }
}

.header-actions--right {
  display:flex;
  justify-content:space-between;
}

.header-display-mobile .header-nav-item.header-nav-item--collection {
display:none;
}.header-nav-folder-content {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: auto;
   margin-left:-3.5em;
    padding: .5em 1em;
    text-align: left;
    width: 200px !important;
    z-index: 10;
}

 .header-nav-item--folder:hover .header-nav-folder-content, .header-nav-item--folder .header-nav-folder-content.focus-within {
    opacity: 1;
    pointer-events: auto;
}
/* Align left dropdown */
.header-nav-folder-content {
    text-align: center !important;
}
.header-menu-actions.language-picker.language-picker-mobile {
    top: -141px!important;
    position: relative!important;
}

About the contact link I just simply created a new page and added it through squarespace

Do you have anything in Header Code Injection?

Yes, sorry!

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
    Weglot.initialize({
        api_key: 'wg_20e735dec235937f029b216929b6d4cc7'
    });
</script>

Sorry, I can't explain how to change, because I really dont understand how it's set up despite  you providing the code you're using.

Something different on this page, the links are a different colour:

https://ddm-studio.com/services

Oh noo! I didn't notice that before. When I go to edit that page I don't see anything wrong.

Can I reset it and do it again? Maybe you can help?

Thanks

I may be able to help if you could give me access to your website, but I'm not sure what else I could do without exploring the backend of your website.

This is the code in the footer! Maybe it might help

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
   $(function() {
   $(".header-display-desktop .header-nav-item:nth-child(n+4)") .prependTo (".header-actions--right");
});
</script>

Interesting, I would have expected to see (n+2) not (n+4) given the outcome. 

I erased all the css and coding.

Can you help me to reach what I want for my website, please?

I'd like to make a second menu to the right between the logo and cta tab with the language switcher.

Try changing the (n+4) to (n+3), save and see if that had the outcome you want.

I tried and I need to work on it. I'm not able to figure out the reason why in two pages the colours change.

Any idea?

You appear to have some CSS  to change the colour using the British spelling of colour rather than color:#000

Hi Ziggy!! Thank you, but I tried to edit it and it doesn't work

The colour seems correct on the pages as far as I can tell.