Menu to right in header with text

[Ab52]

Hello everyone,

 I’m trying to get my menu to the right side on desktop view and add text next to it. I also want it to open from the right. Can someone help me? 

here is what i want to achieve:

https://cdn.shopify.com/s/files/1/0741/4461/2617/files/IMG_0903.jpg?v=1725898431

weblink:

https://3lo1nnaxknuj5ldk-74144612617.shopifypreview.com

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Ab52 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<script>
window.addEventListener('load', function() {
    let icon = document.querySelector(".header__secondary-nav .header__icon-list");
  let menu = document.querySelector(".header__icon-list");
  icon.insertAdjacentElement("afterend", menu);
})
</script>

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

[BSS-TekLabs · Accepted solution]

<style>
  .navigation-drawer[mobile-opening=left] {
    right: 0 !important;
    left: auto !important;
}
</style>

And add more this code to open menu in right @Ab52 

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

[BSS-TekLabs · Accepted solution]

<style>
.navigation-drawer[mobile-opening=left]>[is=close-button] {
    margin-left: 80% !important;
}
</style>

And add more code to move button close to right @Ab52 

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Ab52 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<script>
window.addEventListener('load', function() {
    let icon = document.querySelector(".header__secondary-nav .header__icon-list");
  let menu = document.querySelector(".header__icon-list");
  icon.insertAdjacentElement("afterend", menu);
})
</script>

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

[BSS-TekLabs · Accepted solution]

<style>
  .navigation-drawer[mobile-opening=left] {
    right: 0 !important;
    left: auto !important;
}
</style>

And add more this code to open menu in right @Ab52 

[BSS-TekLabs · Accepted solution]

- Here is the result you will achieve:

[BSS-TekLabs · Accepted solution]

<style>
.navigation-drawer[mobile-opening=left]>[is=close-button] {
    margin-left: 80% !important;
}
</style>

And add more code to move button close to right @Ab52 

[BSS-TekLabs · Accepted solution]