Jump to content

Folder items in Navigation Menu get cut off

Recommended Posts

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?

 

issues TKOW website.png

Edited by vibeke
Link to comment
  • 2 months later...

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

Link to comment
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?

image.thumb.png.af471ac9a2f11c22cb815844d9949c4c.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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:

image.thumb.png.37a5295526f2710e3adc364a9b7ec218.png

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;
}

 

Link to comment

@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.

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment

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. 

Edited by derricksrandomviews
Link to comment

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.

Link to comment

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. 

 

Edited by derricksrandomviews
Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.