Custom sub menu style

[logoglo]

Hi, see: https://ledgerops.kinsta.cloud/

I have added custom css to make the menu look like this:

This is the code:

.desktop .sub-menu {
     border-style: solid;
  border-width: 1px 0px 1px 0px;
  border-color: white;
  position: absolute;
    display: none;
    float: left;
    min-width: 200px;
    margin: 0;
    padding: .75em 0;
    font-size: 16px;
    list-style: none;
background-color: transparent;
    z-index: 1000;
    border-radius: 0px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    box-shadow: 0 0px 0px rgba(0,0,0,.25);
}

How do I add the white line in between menu items, so it looks like this:

Thanks!

[ruenel]

Hello @logoglo,

Thanks for writing in!

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.desktop .sub-menu > .menu-item {
    border-bottom: solid 1px white;
}

.desktop .sub-menu > .menu-item:last-of-type,
.desktop .sub-menu > .menu-item:last-child {
    border: none;
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Regards.

[logoglo]

Thanks, thats what I wanted…but…hehe…any way of centering the menu text? see how its uneven?

[ruenel]

Hello @logoglo,

Please update your css code and remove the padding in your CSS.

.desktop .sub-menu {
     border-style: solid;
  	border-width: 1px 0px 1px 0px;
  	border-color: white;
  	position: absolute;
    display: none;
    float: left;
    min-width: 200px;
    margin: 0;
    padding: 0;
    font-size: 16px;
    list-style: none;
	background-color: transparent;
    z-index: 1000;
    border-radius: 0px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    box-shadow: 0 0px 0px rgba(0,0,0,.25);
}

Please let us know if this works out for you.

[logoglo]

Perfect! thanks so much!

[ruenel]

You are most welcome!