Multiple Ubermenus

[route35media]

Good evening, I’m currently deploying two Ubermenus on a site (one in header, one in footer) and am trying to change the footer menu text (from saying “Menu” to “Frequently Asked Questions”) and also swap out the traditional 3-bar menu icon for a different Font Awesome icon. I’m also looking to customize the colors of the footer menu to differentiate it from the primary menu at the header. Thanks very much. As always the support on here is tremendous.

[ruenel]

Hello There,

Thanks for writing in!

1.) Please create two sets of menus in Appearance > menus. One menu will be assign for the header and one for the footer. You may edit the menus by utilizing the ubermenu settings when you hover over the menu item.

2.) To change the hamburger icon into something else, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-btn-navbar .x-icon-bars:before {
    content: "\f105";
}

You can find all the content value or unicode here: http://fontawesome.io/icon/

3.) What you be the color of the footer menu text? To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

[route35media]

Good morning RueNel – the URL is jobinterview.today – to respond to your points:

1. I created separate menus for the header and footer. I’m looking to edit the footer menu as a whole, not the individual page items/menu tabs.

2. I would like to change the hamburger icon for the footer menu as well as the text on mobile mode where it says “MENU” – I would like to change that text on the footer menu to “Frequently Asked Questions”

3. I was thinking the colors will be inverted compared to the header menu to help differentiate and make it stand out. Red background - rgb(219, 58, 48) - white on hover – black text – something like that.

I also want to make sure I assigned the footer menu correctly – I pasted the shortcode manually in the footer widget settings – is that the proper way of placing it?

[route35media]

Okay! Solved issue. Needed to click “Add Ubermenu configuration” in order to separate primary header menu and secondary footer menu. I should be able to play with the settings in there now in order to achieve what I’m looking for. Still – I wasn’t able to change the hamburger icon on the footer menu with the previous CSS you provided – perhaps the target element wasn’t correct?

[mldarshana]

Hi There,

Try adding the following CSS rule instead to target the footer menu icon.

.fa-navicon::before, .fa-reorder::before, .fa-bars::before {
    content: "\f105";
}

Hope that helps.

[route35media]

@mldarshana

.fa-navicon::before, .fa-reorder::before, .fa-bars::before {
content: “\f105”;
}

That also changes the Font Awesome icon on my header.

[mldarshana]

Hi there,

Please use the below code instead.

.x-colophon.bottom .fa-bars::before {
    content: '\f105';
}

Hope that helps.

[route35media]

@mldarshana

.x-colophon.bottom .fa-bars::before {
content: ‘\f105’;
}

Yes, perfect, thanks @mldarshana

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.