Primary Navigation Add / and align bottom

You can play around with this CSS:

.main-nav li.menu-item:not(:last-child):after {
    content: "";
    height: 150%;
    width: 1px;
    background-color: #cacaca;
    position: absolute;
    top: 50%;
    right: 0;
    transform: rotate(15deg) translateY(-50%);
}

.main-nav li.menu-item{
    position: relative;
}

I'm not sure I understand what you mean with #2 though. Can you explain a bit more?

Hi Elvin,

Thanks for your response, for item no 2, please refer this https://imgur.com/a/01XzYTv

I would like the float right item to align bottomr

Try adding this CSS:

nav#site-navigation {
    margin-top: auto;
}

If this doesn't work, can you link us to a sample page in question?

Hi Elvin,

It works.

There's some issues will need your help, FYI i've set the line heigh of the menu item to "0" which the client prefer it. and it comes with 2 issues
https://imgur.com/a/OShkPia

1. "Slash" dissapear/no-show when there's no submenu items. How to fix this?
2. Wording seems at lower point when got submenu, compare with no-submenu's menu. How to make whole roll parallel ?

Let's modify the CSS selectors a bit.

Try this:

.main-nav ul > li.menu-item:not(:last-child) a:after  {
    content: "";
    height: 90%;
    width: 1.5px;
    background-color: #cacaca;
    position: absolute;
    top: 50%;
    right: 0;
    transform: rotate(20deg) translateY(-50%);
}

.main-nav ul > li a {
    line-height: 1.5em !important;
}

.main-navigation .main-nav>ul {
    align-items: flex-end;
}

The result - https://share.getcloudapp.com/12uvBgm7

Hi Elvin,

Thanks, it work already

Thnk you

Hi Elvin,

I would want the slash only at Only at Primary Menu roll, but DO NOT want it on the SUB-menu.
https://imgur.com/a/TF2foSU

How to achieve that ya?

Add this:

.main-nav ul.sub-menu li.menu-item a:after {
    display:none;
}

Perfect,

Thank you Elvin

No problem. :D