Docs

[Karen]

Hey there,
please help me along with another navbar issue, I checked the forum for the last hour but didn’t quite find something similar.
1) First problem, I would like to separate my menu items in navbar with something like this:
xxx | xxx | xxx |
How do I add some sort of separation sign (if it is possible at all)?

2) Second question, a little difficult to explain. I would like the main item to be in the dropdown, too. Like this one: http://www.observatory.net.au/
if you hover over “things to do”, the main item “things to do” shows up as well.
How can I accomplish this, please?

3) I used code from the forum search to get the dropdown menu exactly under the menu link in navbar:
.masthead-inline .x-navbar .sub-menu {
left: -50%;
text-align: Center;
}

It is not working out properly. See screenshot. How would I adjust the code, please?

Thanks a lot and regards,
Karen

[Karen]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks fir writing in!

#1. You can add this under Custom > CSS in the Customizer.

.x-navbar .desktop .x-nav > li:not(:last-child) > a > span {
  border-right: 1px solid #7f7f7f;
  margin-right: -20px;
  padding-right: 20px;
}

#2. It’s simple. You need to add a duplicate item of this menu again in dropdown.

#3. It seems you have added this :

.x-navbar .desktop .x-nav > li ul {
  top: 40px;
}

Let’s remove this to get expected result (default style) or increase the value to push it a bit up.

Hope this makes sense.

[Karen]

Hello Rupok,

#1. Solved, great, brilliant!

#2. Yay, solved, perfect!
Thanks for that great support, so appreciated 🙂

#3. A little better, but not perfect yet. Actually I don’t have added the code you referred, so there was nothing to remove. This is my CSS at the moment:

.masthead-inline .x-navbar .sub-menu {
left: -50%;
text-align: Right;
}

.x-navbar .desktop .x-nav > li:not(:last-child) > a > span {
border-right: 1px solid #7f7f7f;
margin-right: -20px;
padding-right: 20px;
}

The kind of large space between the menu items in dropdown is bothering me. (I checked that in forum search but didn’t dare to try CSS recommendations from 2015.)
How can I make that space smaller?

Thank you!

[Jade]

Hi Karen,

Please add this code in the customizer:

.desktop .sub-menu a {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

Hope this helps.

[Karen]

Hello Jade,

#3. solved too! 🙂

Just a few words: I started off some months ago as a complete WordPress-Newby with no knowledge at all, and getting my page running was hard work and learning all the time. I don’t know how many night shifts 😉 But X is great, Cornerstone is logical and great – and your technical support is the best I ever experienced. Thanks!

Regards, Karen

[John Ezra]

Thank you for your kind words. On behalf of Jade and all of Theme.co, you’re most welcome! Thank you for choosing X we’re happy to have you with us. Have a wonderful day! 🙂

[Author]

Posts