Uber Menu icons

Support
#1

Hi all i cant seem to get my icons that i have in the menu to show on my uber menu is this possible or do i need to do something to allow this ?

Thanks

#2

Hello @simonmphoto,

Thanks for writing in!

You can add the icon shortcode in UberMenu. You can get the icon shortcodes from here:
http://demo.theme.co/integrity-1/shortcodes/icons/

If still the icons do not display, use the icon html code instead. For example:

<i class="x-icon" data-x-icon-s="&#xf641;"></i>

Where the icon code f641 ( &#xf641; ) is from https://fontawesome.com/icons?d=gallery4.

There are 3 attributes depending on icon:

  • data-x-icon-b for social icons.
  • data-x-icon-o for outline icons.
  • data-x-icon-s for solid icons.

It’s for solid icons (like https://fontawesome.com/icons/ad?style=solid ), then for brand icons (like https://fontawesome.com/icons/500px?style=brands), and then for outline and regular icons (like https://fontawesome.com/icons/angry?style=regular).

BUT, not all icons are achievable, especially the new ones that aren’t still integrated to the theme.

Thanks!

#3

hey guys im really struggling trying to get the menu to work seems very complicated

I would like the uber menu at the bottom to look like the top menu but i cant seem to get there can anyone help

#4

Hi @simonmphoto,

May I know how to reproduce that? I checked your site and its different than your screenshot, perhaps it’s already fixed on on different header?

Thanks!

#5

Hi,

i have just been playing and not its not fixed ive been trying different things on a test page so there is no way you could of checked the menu as the page is not live.

this is the page as you can see it looks absolutely awful https://hydrohottubs.com/hot-tub-jacuzzi-covers/

I want it to match the menu in the upper bar but then have the funky mega menu below.

if you can help at all it i would be very grateful ive tried watching videos etc but i cannot get my head around it

#6

Hello @simonmphoto,

Thanks for updating in!

The two menus were completely different and independent. The first menu is the navigation inline element and the second one is the ubermenu. You cannot have both the same. You can either have an ubermenu or just the navigation inline element.

Hope this helps.

#7

i Have taken the navigation inline out of the header and just added the uber menu using short code into a text area which has worked i’m not sure if that’s how it is actually supposed to be done

but this happens ?

Xp Pro Editor it looks fine

Website view

Am l doing this right ?

Thanks

#8

Hi again,

Yes you’ve done it right but I see you’ve given the height of 30px to your menu Bar that’s why you’re having this issue. To fix this, please inspect your Bar in Header builder that has the Uber Menu (see screenshot)

Under Dimensions change the Height from 30px to Auto (see screenshot)

Let us know how this goes!

#9

Thanks this has now happend

in Xpro editor

and in web

I did not realise it would be this complicated

#10

Hi There,

Please change the height of that bar to 55px instead of auto:

If it still doesn’t work, please share us with your admin account so we can take a closer look.

Thank you.

#11

still not having any luck in the live website view the menu keeps defaulting to the bottom of the bar for some reason

I will send a private note for the log in

#12

Hi again,

I checked your staging site and the bottom bar is displaying correctly (see screenshot)

I then checked your live site and I still see the height 30px for your bottom bar, make sure you change the height to 55px in your live site as well.

Hope this helps!

#13

i would like the menu items in the middle of the bar height wise not at the bottom.

what live site did you check ? because on my actual live site not the live staging site the uber menu is not there as i did not want to muck up my live site.

This menu issue has been going on for a week nearly and i am no further forward

This is my staging site displayed via a web browser https://hydro-hot-tubs-staging-3.onyx-sites.io/hot-tub-jacuzzi-covers/

As you can see the menu items site on the bottom not where i want them i would like them in the middle

the xpro editor is misleading as this is what it displays below

as you can see totally different from the web browser view of the staging site.

I also don’t really want the menu bar that deep as it overwhelms the other bar

I have also noticed that the hidden bar has disapeared from underneath the menu bar

#14

Hi,

To fix it, please remove p tags in your uber menu shortcode,

Then change height of your first bar(top image) to be calc(100vh - 135px)

Thanks

#15

Thanks that worked well looking through the uber menu directions it explains how to intergratehttps://sevenspark.com/docs/ubermenu-3/theme-integration/x or is it just easier to use a shortcode for the menu

Thanks

#16

Hi @simonmphoto,

That’s for X theme only, since you’re using Pro theme with the custom header you don’t need to do that.

Regards!

#17

just use the short code then rather than a nav bar ??

#18

Hello @simonmphoto,

Yes you will need a text element or content area element with the uberMenu shortcode in it. Using the navigation element will not display the ubermenu.

Hope this helps.

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.