Navigation width

Password: yoga

Hi, how can I make the navigation container wider? I want to keep the same distance between the nav item links, I just don't want the nav items to wrap when in tablet view. So I want that container to be as wide as possible so nav items don't wrap.

Thanks in advance!

https://coral-elk-m3e7.squarespace.com

Password: yoga

Thank you!

this solution doesn't work for me.  https://carpediem.yoga

On 3/25/2024 at 12:22 AM, askdkym said:

this solution doesn't work for me.  https://carpediem.yoga

You can use this CSS code

nav.header-nav-list {
    flex-wrap: nowrap;
}
.header-title-nav-wrapper {
    margin: 0 !important;
}
.header-display-desktop {
    justify-content: center !important;
    flex-direction: column;
}

Thank you, Tuan!!!

Hi Tuan, the problem has returned!

I am starting to sell courses on my website, and now the Login link is wrapping LOL

can you help me please?

Thank you!

On 7/15/2024 at 7:48 AM, askdkym said:

Hi Tuan, the problem has returned!

I am starting to sell courses on my website, and now the Login link is wrapping LOL

can you help me please?

Thank you!

Login in a different container

You can use this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('.header-actions.header-actions--right>.user-accounts-link').appendTo('nav.header-nav-list');
});
</script>
<style>
  nav.header-nav-list>.user-accounts-link+.user-accounts-link {
    display: none !important;
}
</style>

Now the Login link doesn't show, and all the menu items are aligned to the left instead of the center 😬

I had to delete that code to restore functionality to my website.

On 7/17/2024 at 1:11 PM, askdkym said:

Now the Login link doesn't show, and all the menu items are aligned to the left instead of the center 😬

I had to delete that code to restore functionality to my website.

I see you removed Login link. Do you still need help?

The Login link is still there, I still need this help!

Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('.header-actions.header-actions--right>.user-accounts-link').appendTo('nav.header-nav-list');
});
</script>
<style>
  nav.header-nav-list>.user-accounts-link+.user-accounts-link {
    display: none !important;
}
  div.user-accounts-link {
    margin-left: 0px !important;
}
</style>

then save & reload the site.

If it still doesn't work, you can keep code in Code Injection, I can check reason easier