Folder items in Navigation Menu get cut off

Site URL: https://tekorowaiowaiheke.org/

Hi

I have an issue with the menu items inside a dropdown folder in the top level navigation of this site getting obscured. They simply fall outside of the browser window and the text is obscured. We're using the BRINE template

The names are quite long but it's important for the client to have those full names there and the dropdown menu item in that spot in the navigation. Is there anything that can be done about this so the text remains visible, i.e. the dropdown not appearing to the right of the top level nav item but shifting towards the centre of the site instead when dropping down?

Add to Home > Design > Custom CSS

[href="/about-1"]+.Header-nav-folder {
    left: -300% !important;
}

Magic! thank you so much @tuanphan
this worked like a charm

I'm having a bit of trouble with this code. Without the code, the menu appears only when hovering over the nav title. With this code, the menu appears when hovering over anywhere that the menu would occupy. Since we have a search bar below our menu, this means the menu now obstructs the search bar rather than getting cut off on the edge of the screen.

Any help would be greatly appreciated!

Site URL: https://bat-chicken-yhj4.squarespace.com/

Password: THX

13 hours ago, Samuel said:

I'm having a bit of trouble with this code. Without the code, the menu appears only when hovering over the nav title. With this code, the menu appears when hovering over anywhere that the menu would occupy. Since we have a search bar below our menu, this means the menu now obstructs the search bar rather than getting cut off on the edge of the screen.

Any help would be greatly appreciated!

Site URL: https://bat-chicken-yhj4.squarespace.com/

Password: THX

seems fine?

12 hours ago, tuanphan said:

seems fine?

Sorry. I removed the code while testing and forgot to add it again. Without the code, the menu runs off-screen only when the browser window isn't maximized. I tested in on Incognito windows using both Chrome and Edge and got this result:

I've now added the following code back in again so that you can see how it behaves with the search bar below the nav menu.

[href="/about-us"]+.Header-nav-folder {
    left: -150% !important;
}

@tuanphan Thanks so much for all your help with this! Any clue how to prevent the About Us menu folder from covering the search bar? I notice the other menu folders only trigger when hovering directly over the folder title, whereas the About Us menu folder triggers whenever the cursor is anywhere below the label.

6 hours ago, Samuel said:

@tuanphan Thanks so much for all your help with this! Any clue how to prevent the About Us menu folder from covering the search bar? I notice the other menu folders only trigger when hovering directly over the folder title, whereas the About Us menu folder triggers whenever the cursor is anywhere below the label.

[href="/about-us"]+.Header-nav-folder {
    left: -100% !important;
    opacity: 0 !important;
}
[href="/about-us"]:hover +.Header-nav-folder {
    opacity: 1 !important;
}

On 5/7/2020 at 6:55 PM, tuanphan said:

[href="/about-us"]+.Header-nav-folder { left: -100% !important; opacity: 0 !important; } [href="/about-us"]:hover +.Header-nav-folder { opacity: 1 !important; }

Hi @tuanphan. Unfortunately this doesn't seem to do it. The folder menu is still there, just invisible. This means that, while the folder menu doesn't open when cursor is below the folder name (expected behaviour), it also doesn't stay open when attempting to pick an item from the menu and attempting to click on the search bar selects invisible menu items instead.

What browser are you using? It looks perfect when I view it using chrome with zoom set at 100. Screen Res is at 1920x1280 with magnification set at 125. Nothing is cropping, and  the right border of the drop down box has space between it and the scroll bar. Are you viewing logged out? Code does not always exhibit the same way when you are logged into your account. 

Hi @derricksrandomviews. Yes, sorry for the confusion. At the moment, I've applied the code offered by @tuanphan which successfully fixes the issue of the menu getting cut off by the right side of the screen.

Unfortunately, it creates other issues.

With the first code applied,

[href="/about-us"]+.Header-nav-folder {
    left: -150% !important;
}

the menu was no longer cut off but was opened whenever the cursor hovered over the place on the screen where the menu would appear - namely, on top of our search bar.

With the second code applied (applied currently),

[href="/about-us"]+.Header-nav-folder {
    left: -100% !important;
    opacity: 0 !important;
}
[href="/about-us"]:hover +.Header-nav-folder {
    opacity: 1 !important;
}

the whole thing functions the same as above, only the menu is invisible. This means that when the cursor hovers under the menu title, the title goes bold and when try to click the search bar, your cursor actually selects one of the invisible menu items.

I think I was the one a bit confused. I was looking at the OPs site.

I see where one drop down and the search bar are not getting along. I would like to suggest a work around for this. Remove the search bar, and replace it with a nav link. The link url would be your sites domain with this at the end: /search 

This uses  Squarespace's built in search engine, full screen. Neat feature because you can use it from your nav bar and  anywhere even off site like this:  

https://myrandomviews.com/search 

You will need to edit the url once you get a custom domain and change the link url to match. 

Hi @derricksrandomviews,

For various reasons, we'd like to continue pursuing the built-in nav search bar, but thanks so much for the offered workaround!

Can it be moved? Next to Contact?

Try inserting this code

[href="/about-us"]+.Header-nav-folder {
    left: -100% !important;
    visibility: hidden !important;
}
[href="/about-us"]:hover +.Header-nav-folder {
    visibility: visible !important;
}