coverkitchen 2 Share Posted September 17, 2020 Site URL: https://coverkitchen.squarespace.com Hello, how can I add a separator line between specific items in a navigation drop drown menu? I would like to adjust the space between the line and the items too. See attached a screenshot of what I am trying to achieve. Many thanks in advance! Xavier Link to post
0 creedon 810 Solution Share Posted September 17, 2020 (edited) Second shot! /* desktop */ .header-nav-folder-item:nth-of-type(12) { border-bottom: 1px solid; padding-bottom: 1em; } .header-nav-folder-item:nth-of-type(13) { padding-top: 1em; } /* mobile */ .header-menu-nav-item:nth-of-type(13) a { display: inline-block; border-bottom: 1px solid; padding-bottom: 1em; } .header-menu-nav-item:nth-of-type(14) a { padding-top: 1em; } This CSS is very specific to your current menu layout. If you change the order of the menu items then you need to update the CSS. If you add another Folder Page and it has as many or more items then it too would pick up this CSS. In that case another way to target the menu you want to style would be needed. Something like .header-nav-item header-nav-item--folder:nth-of-type(n); Let us know how it goes. Edited September 18, 2020 by creedon version 2 of CSS, add mobile rules Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
1 creedon 810 Share Posted September 17, 2020 (edited) This is one way it could be done. Put the following in Design > Custom CSS. .header-nav-folder-item { border-bottom: 1px solid; padding-bottom: 1em; padding-top: 1em; } .header-nav-folder-item:last-child { border-bottom: unset; } You can play with the border style and padding. This is for a 7.1 site. Let us know how it goes. Edited September 17, 2020 by creedon Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
0 coverkitchen 2 Author Share Posted September 17, 2020 @creedon Many thanks for helping out with this. However, the code adds a separator between each item. Instead, I need to target a specific item. As you can see from the screenshot, I would like to add a line between "Comedy" and "Interior". Would that be possible? Link to post
0 creedon 810 Share Posted September 17, 2020 Sorry I completely missed that requirement. I'd be glad to give it another go. However your site is now private. Please set up a site-wide password. Post the password here and then we can take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
0 coverkitchen 2 Author Share Posted September 17, 2020 @creedonSure, here is the password: coverkitchen2020 Let me know how it goes. Many thanks again! Link to post
0 coverkitchen 2 Author Share Posted September 17, 2020 @creedon It works perfectly and it looks beautiful! Thank you for your amazing work. Would be possible to replicate this for mobile view? Currently, the line does not show with hamburger menu. I have a code that aligns the menu to the right on mobile, not sure if that needs to be taken on account. Having the separator for mobile too would be perfect! Link to post
0 creedon 810 Share Posted September 18, 2020 I've updated my previous post with an updated version of the CSS adding rules for mobile. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
0 coverkitchen 2 Author Share Posted September 18, 2020 @creedonYou are awesome. Can't thank you enough for this! Link to post
0 creedon 810 Share Posted October 4, 2020 It is hard to know without seeing your site or knowing where you want the separators to appear. Please give us the URL for your site. If you've not already do so please set up a site-wide password. Post the password here and then we can take a look at your issue. Also please give us more detail about where you want these separators to appear. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
0 Aliwiper 1 Share Posted October 30, 2020 Hi Creedon, I'm looking for exactly this solution in a 7.0 website - https://alastairphilipwiper.com/ - in the drop down menu " work" I would like to add a divider underneath "buildings" to have a new section - do you think it is possible? Thanks! Link to post
0 creedon 810 Share Posted October 31, 2020 I'll take a look now. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
0 creedon 810 Share Posted October 31, 2020 (edited) @Aliwiper Add the following to Design > Custom CSS. /* desktop */ #topNav .folder .folder-child-wrapper ul.folder-child li:nth-of-type( 4 ) { border-bottom: 1px solid; padding-bottom: 1em; } #topNav .folder .folder-child-wrapper ul.folder-child li:nth-of-type( 5 ) { padding-top: 1em; } /* mobile */ html.mobile-view #mobile-navigation > ul li .folder-toggle-box:checked ~ ul li:nth-of-type( 4 ) a { border-bottom: 1px solid; padding-bottom: 1em; } html.mobile-view #mobile-navigation > ul li .folder-toggle-box:checked ~ ul li:nth-of-type( 5 ) a { padding-top: 1em; } This is for a v7.0 using the Forte template. Its also specific to Aliwiper's site and has the same caveats I mentioned in my previous post. Let us know how it goes. Edited November 4, 2020 by creedon Aliwiper 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
0 Aliwiper 1 Share Posted November 4, 2020 @creedon this is absolutely perfect, just what I was looking for!!! Thank you so much for your help Thomas creedon 1 Link to post
0 tuanphan 9,584 Share Posted November 5, 2020 On 11/4/2020 at 6:04 PM, Aliwiper said: @creedon this is absolutely perfect, just what I was looking for!!! Thank you so much for your help Thomas Some feedbacks on your site, hope it useful 1. (Mobile) Some pages have very long content, you should add a back to top button. There are some code on forum, you can search ;) Or you can add text link with url: # in footer, user click on it, it will jump to top of page 2. (Mobile) Space between header - content is too big? If you feel not good, add this to Design > Custom CSS @media screen and (max-width: 640px) { body:not(.homepage) header#header { padding-bottom: 20px; } } 3. (Tablet) text is a bit narrow. Do you want stack them + increase text width? Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
Question
coverkitchen 2
Site URL: https://coverkitchen.squarespace.com
Hello, how can I add a separator line between specific items in a navigation drop drown menu?
I would like to adjust the space between the line and the items too.
See attached a screenshot of what I am trying to achieve.
Many thanks in advance!
Xavier
Link to post
Top Posters For This Question
7
5
2
1
Popular Days
Sep 17
7
Oct 31
2
Sep 18
2
Oct 4
2
Top Posters For This Question
creedon 7 posts
coverkitchen 5 posts
Aliwiper 2 posts
Vivienne13 1 post
Popular Days
Sep 17 2020
7 posts
Oct 31 2020
2 posts
Sep 18 2020
2 posts
Oct 4 2020
2 posts
Popular Posts
creedon
@Aliwiper Add the following to Design > Custom CSS. /* desktop */ #topNav .folder .folder-child-wrapper ul.folder-child li:nth-of-type( 4 ) { border-bottom: 1px solid; padding-bottom
Aliwiper
@creedon this is absolutely perfect, just what I was looking for!!! Thank you so much for your help Thomas
Posted Images
15 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment