Menu item divider

  • Resolved A. Jones

    (@nomadcoder)


    6 years, 1 month ago

    Is it possible to make the menu item divider a bar or some character rather than a border?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi Shofly,

    As far as I can tell, it’s not possible to use characters unless I change the menu HTML. But it does seem to be (sort of) possible using the “border-image” CSS property with a linear gradient.

    Please try adding this to Mega Menu > Menu Themes > Custom Styling.

    #{$wrap} #{$menu} > li.mega-menu-item {
  border-left: 1px solid;
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, #fff 26%, #fff 74%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%) 1 repeat;
}
#{$wrap} #{$menu} > li.mega-menu-item:first-child {
  border-left: 0px;
}

    That will add a white, vertically centered, 50% tall border to each of the top level menu items.

    I used this website to generate the gradient:

    https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+25,1+26,1+74,0+75

    Thread Starter A. Jones

    (@nomadcoder)

    Perfect. Thank you!

    Plugin Author megamenu

    (@megamenu)

    You’re welcome ??

    If you have a spare minute, would you mind leaving a quick review for the plugin at the bottom of this page? It would be much appreciated!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Menu item divider’ is closed to new replies.