Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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 post
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Add to Home > Design > Custom CSS [href="/about-1"]+.Header-nav-folder { left: -300% !important; }  

Posted Images

  • 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 post
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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
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 post

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
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 post
Posted (edited)

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 post

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 post
Posted (edited)

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 post

Create an account or sign in to comment

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


×
×
  • Create New...