Docs

[Effecticore]

Hi guys,

in the process of creating my third X Theme site this year! Way to go – and still lots to learn.
This time I want to customize the menu bar to make it look like in attached photo.
The functions I would like to combine for this look:

– Menu is aligned with bottom of Logo file
– Menu is outlined
– Menu list items are accompanied by a down arrow
– On hover the submenu entries should show AND the hovered menu point background should change color

Is there a way to accomplish this via CSS?
Can you be so kind to provide the coding for that and tell me where to put it?

Thanks a lot in advance!

Lutz

[Effecticore]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials, if necessary, so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password (only if necessary)

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[Effecticore]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.x-navbar .desktop .x-nav > li > a {
    font-size: 14px;
    border-right: 1px solid;
    padding-top: 9px;
    height: 32px;
    border-top: 1px solid;
    margin-top: 127px;
}
.x-navbar .desktop .x-nav > li:last-child a {
border-right:none;
}
ul#menu-primary-menu {
    border-right: 1px solid;
    border-left: 1px solid;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 0 4px 0 0 #02aed6;
    background-color: red;
    color: #fff;
}

.x-navbar .desktop .x-nav>li>a:after {
    content: "\f103";
    margin-left: 0.35em;
    font-family: "FontAwesome" !important;

}

.x-navbar .desktop .x-nav li>a>span:after {
    content: " ";
}

Hope that helps.

[Effecticore]

Great! This is starting to look like I wanted it.
Made some changes to the font size of the submenu succesfully.
Now two things are still too tricky to me to solve by myself:

– I would like to aline the dropdown menus left with the main level menupoint selected. It seems random currently.
– Can I specify somehow that main level menu items with no sub-level pages/menu items do not show that arrow.
Otherwise users might expect more content where there is none, i.e. “Kontakt”.

Thanks in advance!

[Thai]

Hi There,

Please find this CSS:

.x-navbar .desktop .x-nav>li>a:after {
    content: "\f103";
    margin-left: 0.35em;
    font-family: "FontAwesome" !important;

}

And change to this:

.x-navbar .desktop .x-nav>li.menu-item-has-children>a:after {
    content: "\f103";
    margin-left: 0.35em;
    font-family: "FontAwesome" !important;
}

After that adding the following CSS:

.masthead-inline .x-navbar .desktop .sub-menu {
    left: 0;
    right: auto;
}

Hope it helps 🙂

[Effecticore]

Hi guys,

thanks a lot for your great support. We are almost there!

The only remaining issue now is that I have a gap between the main menu and child dropdown menu which leads to the menu disappearing when I try to move the mouse to the dropdown menu. How can I fix that?

Best and thank you!

L

[Christian]

In Appearance > Customize > Header, adjust your Navbar Top Height (px) to 145

Thanks.

[Thai]

Hi There,

Please find this CSS:

.x-navbar .desktop .x-nav > li > a {
    font-size: 14px;
    border-right: 1px solid;
    padding-top: 9px;
    height: 32px;
    border-top: 1px solid;
    margin-top: 127px;
}

And change to this:

.x-navbar .desktop .x-nav > li > a {
    font-size: 13px;
    border-right: 0px solid;
    padding-top: 10px;
    height: 35px;
    border-top: 1px solid;
    margin-top: 100px;
    padding-bottom: 10px;
}

After that add the following CSS:

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

Hope it helps 🙂

[Author]

Posts