Adding icons to ABOVE nav menu items

[EarlySigns]

Hi there,

I was wondering if you could help me? I have been asked by a client to make the icons of the menu (graphic enabled in Pro Headers, and icon enabled in Appearance/Menus) not to appear by the side (which it seems to do by default), but to make the icons appear ABOVE the nav items. Is there a way to do this? I have tried all the forum and am scratching my head on how to make them go above - they display fine by the side, but not above.

I have been asked to make it like this website: https://powerday.co.uk/

I do not have a website to show you just yet, as want to know if this is possible before I take the job.
Thanks!

[tristup]

Hi @EarlySigns,

Thanks for reaching out.
To achieve that you need to add the icons and add some custom CSS code to place that icon above the menu item.
First, you need to add the icons manually, but you may need to use the specific data-x-icon attribute to get that icon rendered. Like: I have added the code <i data-x-icon="&#xf0eb;"></i> in menu item and the Bulb icon shown.
To know more about the data-x-icon codes and the way to use the icons, please go through the video.

You may need to add the following custom CSS code into the Theme Options > CSS.

.x-anchor-text-primary i
{
    display: block;
    text-align: center;
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Hope this will help you.
Thanks

[EarlySigns]

@tristup

Hi there, thanks for your response. I was wondering if I could do this with my own images? I can see you can add your own SVG URL into the menu, is there a way to add CSS code to make those images appear above the nav text, instead of using fontawesome icons? Many thanks.

[marc_a]

Hi @EarlySigns,

If you want to add your own images above your menus then just add the image source in the navigation label like the example below.

and to make it above the menu title text, please add this code in your X / Pro > Theme Options > CSS.

.x-navbar .desktop .x-nav > li > a > span > img {
    display: block;
    margin: 0 auto;
}

This is how it looks like:

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[EarlySigns]

Hi there,

Thanks for your considered reply. I have been playing with this code in a test area and sadly cannot get the images to appear above the nav links - instead they are appearing at the side, as if the code added into custom CSS doesnt work. Please could you advise?

http://simplysignspreview.com/jdfay/

[tristup]

Hi @EarlySigns,

To make the image at top of the menu items, you may need to add the following custom CSS code into the Theme Options > CSS.

.x-anchor-text-primary img
{
    display: block;
    margin: 0 auto;
}

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[EarlySigns]

@tristup

.x-anchor-text-primary img
{
    display: block;
    margin: 0 auto;
}

Yes thats done it! Thanks so much for your help.

[marc_a]

Hi @EarlySigns,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme, feel free to reach us.

Thank you.