Docs

[ehsd]

Hello,

A couple things:

1. I’m redesigning our site navigation and I’d like to add icons above the main navigation links. I’d like to be able to use custom SVG icons. I’m sure I could add them with a ::before pseudo class. I was able to add X font awesome icons by entering the code in the menu navigation label, but FA doesn’t have all the icons I like and it also makes the menu labels a mess on the back end.
2. I’d also like to put the social icons and WPML flags inline with the main navigation to the right side
3. lastly, I love the Ubermenu mobile menu, but I’d like to replicate its’ look in the default X mobile menu to be able to disable Ubermenu and save some resources and have better accessibility compliance.

Can you help point me in the right direction?
I’ve attached a image of the general direction we’re looking at for the top nav area of the site.

[Rue Nel]

Hi There,

Thanks for writing in!

1] To add some SVG icon in your menu, please check out this topic: https://community.theme.co/forums/topic/add-custom-svg-icon/#post-275151

2] You can manually insert the social icons and link them to your social profiles. For the WPML selector, there is an option in the WPML settings that will enable you to add the flags in the menu. For more information, check out the documentations here:

How to Add a Language Switcher to Your WordPress Site

https://wpml.org/forums/topic/how-to-add-the-language-selector-to-my-menu/
https://wpml.org/forums/topic/how-to-add-the-language-selector-to-muliple-menus/

3] Regretfully this particular request could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[ehsd]

Thanks, that should get me started. I’m still working with FA icons inserted via the menu title. One issue is I’d like the icon to be centered above the link text. I’ve got the icons on top of the links by inserting a <br/> after the icon. I’d like to write one rule to center all the text, but I haven’t been successful yet. Maybe I just have to use the individual menu ID as my selector?

[Rupok]

Hi there,

We can help you to center the icon. Kindly provide your URL and add a screenshot of what you are trying to achieve.

Cheers!

[ehsd]

I was able to get the icons centered. Its funny, I think the act of writing out a question makes the answer come to me! LOL!

I do have one other related question. I would like to set the link to have the mouseover state when on that page.

The site can be viewed here

[Nabeel A]

Hi again,

Please add the following code in your Customizer:

.current-menu-item a {
    color: #008a5f !important;
}
.current-menu-item {
    background: #fff !important;
}

Let us know how this goes!

[ehsd]

I had to change it a bit to get to match my current mouseovers:

.current-menu-item a {
    color: #008a5f !important;
    box-shadow: inset 0 130px 0 0 rgba(255,255,255,1) !important;
}

Using background{} leaves a slight gap at the top.

Thanks!

Now I just need to adjust the mobile version 🙂

[Rupok]

Great. Let us know if you need assistance for the mobile version and clarify what you want there. You can use media query to write your CSS for mobile only :

@media only screen and (max-width: 979px) {

/* write your mobile CSS here */

}

Cheers!

[Author]

Posts