Support » Plugin: Max Mega Menu » Menu item divider

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:

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

    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.