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

Add a separator line in drop down menu


coverkitchen
Go to solution Solved by creedon,

Question

  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@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

@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

  • 1

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

@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

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

@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

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

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 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
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?

image.thumb.png.eb94f5f87f15462332cfdb01cf2ccb2c.png

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