Ubermenu Icon Size

Support
#1

Hi there,

I’m trying to change the size and colour of the Ubermenu ‘house’ icon that can be seen on the main page menu at the far left of the black bar here www.eurasianwhispers.com.

I’d like it to be a bit bigger and white to fit in with the other menu options, but can’t seem to figure out how to do this.

I realise that Ubermenu has an icon extension pack that allows you to do this, but I was wondering if there was any way I could do this without having to download this (e.g. with CSS), as I think it’s slightly ridiculous that i’d have spend $8 just to make such a tiny alteration…

Thank you!
EW

#2

Hi there,

Thanks for writing in.

Sure, possible with just simple CSS. Please add this to your global custom CSS.

.ubermenu .ubermenu-item-layout-icon_left>.ubermenu-icon, .ubermenu .ubermenu-item-layout-icon_right>.ubermenu-icon {
    vertical-align: middle;
    font-size: 20px;
    color: #fff;
    line-height: 0;
}

Hope this helps.

#3

Hi Rad,

Thank you so much, that worked perfectly.

Could you perhaps help me with a few other little CSS tweaks?

  • Can I make it so that both the house icon and search icon turn a different colour when they are hovered over (like the rest of my menu options)?
  • Can I adjust the size of the search icon?
  • Could you please tell me how to shift the icons vertically up and down?
  • Is it also possible to change the colour of the little arrow indicators that are next to ‘regions’ and ‘contacts’ when you hover over them. At the moment, when you hover over these options the colour of the text changes but the indicator arrows stay white…

Thank you,
EW

#4

Hi there,

  1. You may add this for hover effect
.ubermenu .ubermenu-item-layout-icon_left:hover>.ubermenu-icon, .ubermenu .ubermenu-item-layout-icon_right:hover>.ubermenu-icon {
    color: hsl(193,99%,50%);
}

  1. Sure, please change the font size in the given CSS

  2. This one,

.ubermenu .ubermenu-item-layout-icon_left, .ubermenu .ubermenu-item-layout-icon_right {
padding-top: 5px;
}
  1. Of course, this one :slight_smile: 
.ubermenu-sub-indicators .ubermenu-has-submenu-drop>.ubermenu-target:after {
color: hsl(193,99%,50%);
}

Hope these helps.

#5

Hi EW,

1.) Check this guide: http://sevenspark.com/docs/ubermenu-colors. See here on how to find individual menu item ID. Use the hover selector.

2.) and 3.)Yes. See this on where to adjust those size.

4.) Refer to this guide again please: http://sevenspark.com/docs/ubermenu-colors

Ubermenu documentation is very detailed. First there’s native settings where can adjust styles, then other option is to use custom CSS. We can check it here:http://sevenspark.com/docs

Hope this helps.

#6

Hi Rad and Lely,

Thank you for your help - the first three ones went through fine.

But the last one - changed the non-hover and hover colour of the submenu tab indicators. I would instead like to change the hover colours of the main menu indicators, i.e. the arrows next to regions and contact.

Thank you!
EW

#7

Hi EW,

As stated on the share documentation, we can use custom CSS. We have to inspect the selector for those arrows and change existing colors accordingly. See this: https://screencast-o-matic.com/watch/cbju6elWel

.ubermenu-main .ubermenu-item-level-0.ubermenu-has-submenu-drop>.ubermenu-target:after {
    color: red; /*default arrow color*/
}
.ubermenu-main .ubermenu-item-level-0.ubermenu-has-submenu-drop>.ubermenu-target:hover:after {
    color: green; /* hover color*/
}

Hope this helps.

#8

That’s great, thank you, Lely!

#9

You’re always welcome!

Cheers.