Button in nav getting cut off on narrow screens

I'm not sure why, but the button in the main navigation bar gets cut off on the right side when viewed on a smaller screen. Is there a way to fix that issue? The site's URL is realized.life.

Thanks for your help!

The other thing that's happening is that the nav links stack in a really ugly way on those in-between screen sizes. Not sure how to fix that either.

You can add this to Website > Website Tools > Custom CSS to fix problem

.header-title-nav-wrapper {
    flex: 1 0 50% !important;
}
.header-nav-list {
	flex-wrap: nowrap !important;
}

13 hours ago, tuanphan said:

You can add this to Website > Website Tools > Custom CSS to fix problem

.header-title-nav-wrapper {
    flex: 1 0 50% !important;
}
.header-nav-list {
	flex-wrap: nowrap !important;
}

 

Thanks for that suggestion! Unfortunately, though it fixed the button-being-cut-off issue, now all the menu items overlap each other on smaller screens.

Is there a way to get the hamburger menu to show up before that happens?

11 hours ago, AgnesK said:

Thanks for that suggestion! Unfortunately, though it fixed the button-being-cut-off issue, now all the menu items overlap each other on smaller screens.

Is there a way to get the hamburger menu to show up before that happens?

You can check to see which screen sizes do you see problems & Use this code like this

@media screen and (min-width:990px) and (max-width:1100px) {
.header-title-nav-wrapper {
    flex: 1 0 50% !important;
}
.header-nav-list {
	flex-wrap: nowrap !important;
}
}

IN this case, suppose button cut off on 990px to 1100px

@tuanphan with the new code, even when I change the values, it helps with the button but the text still overlaps.

I tried it out on Responsively to try to figure the screen size, but can't tell exactly when the overlap begins, but it's definitely there at 900 px width.

@tuanphan to clarify, it's the LOGIN button that overlaps. So not sure if that's meant to be targeted separately from the rest of the nav items. 

Okay, I think we should force burger menu appear on these screen sizes. What do you think? If you agree, I can check and give the code

2 hours ago, tuanphan said:

Okay, I think we should force burger menu appear on these screen sizes. What do you think? If you agree, I can check and give the code

Yes, I think that would probably be best. Nothing else I've tried seems to be working. 

On 9/19/2023 at 6:05 PM, AgnesK said:

Yes, I think that would probably be best. Nothing else I've tried seems to be working. 

Use this CSS. This code will run from 901px to 1100px, you adjust these values

 /* Force burger */
@media screen and (min-width: 901px) and (max-width:1100px) {
    .header-menu {
        left:unset;
        width:50%;
    }
     .header-burger {
    display: flex !important
}

.header--menu-open .header-menu {
    opacity: 1 !important;
    visibility: visible !important
}

.header-nav,.header-actions {
    visibility: hidden !important
}
}

50% here is burger menu width

Thank you so much @tuanphan that works beautifully!