Change title of collapsed menu

mbridge87

Hello,

I've gotten frustratingly close with this but as always can't do that last step.

As the title suggests I need to change the text within the box of a collapsed menu (when using the "collapse for mobile" function).

The code I have been using is:

.sm-h5 {
visibility: hidden;
}

.sm-h5: before {
content: "CHOOSE A GALLERY";
visibility: visible;
}


This code does work but as I'm using the class it changes it for all collapsed boxes on that page. I can't seem to figure out how I can do it for only one menu, not both. Specifically the bottom menu with the names of the galleries.

From what I can gather the ID of that menu is "#yui_3_8_0_1_1395227773437_713" but I have no idea how to use this...

Page Link: http://www.maxbridge.co.uk/Pages/Sub-Pages/HomePage/Location

Please help and sorry to post so many threads here

leftquark

Try using the "nth-of-type()" command (http://www.w3schools.com/cssref/sel_nth-of-type.asp).

For example ".sm-h5:nth-of-type(2)" if the item is your second item in the menu.

mbridge87

Hey Leftquark,

Thanks for the help with this.

I have tried this but can't seem to get it to work. I'm not sure if I was clear enough with my explanation.

I don't want to change the names of items within the collapsed menu but rather the title of the menu itself. To clarify when the menu is collapsed the menu itself is called "menu" if there is more than one menu on a page you have two items called "menu", hence I'd like to change the title of one to "choose a gallery". I think this would be less confusing for visitors.

Hope that's more clear and sorry if I've misunderstood anything with the "nth-of-type" thing.

Thanks again for the assistance

leftquark

mbridge87 wrote: »

Hey Leftquark,

Thanks for the help with this.

I have tried this but can't seem to get it to work. I'm not sure if I was clear enough with my explanation.

I don't want to change the names of items within the collapsed menu but rather the title of the menu itself. To clarify when the menu is collapsed the menu itself is called "menu" if there is more than one menu on a page you have two items called "menu", hence I'd like to change the title of one to "choose a gallery". I think this would be less confusing for visitors.

Hope that's more clear and sorry if I've misunderstood anything with the "nth-of-type" thing.

Could you send me a link to the page where you're trying to do this? I went to the page you linked in the first post and I don't see a menu down there.

Are you placing 2 menu content blocks? Can't you just click the wrench on the menu block and change its title there?

mbridge87

leftquark wrote: »

Could you send me a link to the page where you're trying to do this? I went to the page you linked in the first post and I don't see a menu down there.

Are you placing 2 menu content blocks? Can't you just click the wrench on the menu block and change its title there?

Hey. Thanks for replying so quickly.

The link in the first post is correct, but just in case it's the following:

http://www.maxbridge.co.uk/Pages/Sub-Pages/HomePage/Location

Maybe I'm totally missing something but there's two menu content blocks on that page. One at the top which is the main site nav and then one toward the bottom of the page which is a menu to navigate through the galleries (a vertical menu).

When viewing on a mobile or tablet those two menu's have the title "menu". It's when collapsed in "mobile mode" that I need the title changed...rather than reading "menu" for the bottom one I'd like it to say "choose a gallery". So the menu items still have the same names, just the overall menu title changes.

I really hope that makes sense and I've not missed something obvious. I was not aware of an area where I could name Menu content blocks.

Cheers

leftquark

Oops, sorry, I didn't realize you were talking for mobile only! This should do the trick for you ... you just need to call out the specific widget ID

/* Hide the word "menu" */
.sm-page-widget-5477858 .sm-h5 {
  visibility: hidden;
}

/* Change the title "Menu" to "Choose a Gallery" */
.sm-page-widget-5477858 .sm-h5:before {
  content: "CHOOSE A GALLERY";
  visibility: visible;
}

mbridge87

Hey,

Thanks so much for that. I did do something very similar to this at one point but it didn't work. I must have done something wrong.

Really appreciate the help!