[JamesZLParticipant]

Hi X Theme support

I’ve added some customization to my menu thanks to you!

I’m still not completely satisfied with the look it has now: I would like to have a | to separate each menu button. Is there a way to do that?

[Prasant RaiModerator]

Hello James,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

[JamesZLParticipant]

This reply has been marked as private.

[Prasant RaiModerator]

Hello James,

Thanks for sharing the details.

You can add this under Custom > CSS in the Customizer:

 .desktop .x-nav > li {
  position: relative;
  }
  .desktop .x-nav > li:after { 
  content:"";
  display:block;
  width:1px;
  position: absolute;
  right:0;
  background-color:#ccc;
  top: 35%; 
  bottom: 20%; 
  right:20%;
  }

  .desktop .x-nav > li:last-child:after {
  display: none;
  }

Thanks.

[JamesZLParticipant]

Hi

It works!

BUT, all my menus would have to be the same width to make it look symmetrical.

For example, the | on takeaway + levering is inside the g in “levering”

I’ve tried to change the right % but, it just looks not in “order” so there are equal distances between each menu for each “|”

Do you have any suggestions on how to make that happen?

[LelyModerator]

Hi There,

Please replace above code with this:

.x-navbar .desktop .x-nav>li {
    display: inline-block;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    display: inline-block;
}
.desktop .x-nav > li:after {
    content: "|";
    display: inline-block;
    margin: 0 0.5em 0 .5em;
    color: rgba(255,255,255,0.25);
}

Remove this part:

/*
Remove edge of bottom border
*/
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 0 !important;
    padding-right:  0!important;
    margin-right: 50px;
}

Remove this too:

/* 
Menu text align left
*/
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 0!important;
    padding-right: 0;
    margin-right: 19px;

}

Result should be something like attached.

[JamesZLParticipant]

Hi

I did that and I see that everything looks good..

Except there’s one thing missing that is important, which is to make the underline of the menu not be wider than the text.

It seems that it’s a harder thing to work around than I thought :/

Do you have any other suggestions to make it work?

If not, thanks for trying to help!

EDIT:

I found a workaround by editing the

.desktop .x-nav > li:after {
    content: "|";
    display: inline-block;
    margin: 0 1.5em 0 .5em;
    color: rgba(255,255,255,0.25);
}

Margin to “0 1.5em 0 .5em”

Now it looks pretty fine!

But I notice now that there’s one last hickup…

It’s beautiful that each menu has a | to seperate but there’s an extra | at the end of the menu row..

How do you remove that extra one at the right end?

[FriechModerator]

Hi There,

You can add this on the Custom > Global CSS

.x-nav li.menu-item:last-child:after {
	content: "";
}

Thanks.

[JamesZLParticipant]

Fantastic! Thank you.

Would you like me to respond if it works or is it better just to leave it with your solution?(unless you ask explicitly if it worked)

Since the topic gets bumped up and I see you reply back to every response (which takes a little extra and time for you guys – so saving you energy and time).

[Paul RModerator]

Hi,

We always love to know if our solutions work.

Thank you for your response.

Have a nice day!

[Author]

Posts