Title for mega menu mobile


#1

Is there a way (via CSS or something else) to add a ‘Menu’ label to the mobile icon? I know that the hamburger icon should be ubiquitous nowadays but that’s what has been requested.

Thanks!


#2

What Foundry menu stack are you using? Do you have link to a test page?


#3

Hadn’t noticed you mentioned Mega Menu in the title.

Try this:

div.navigation_container > div:first-child::before {
	content: "MENU ";
}

Edit: This works for Nav Bar and not Mega Menu.


#5

That’s odd, @David.

Since I didn’t have link from @jabostick, I used the Mega Menu documentation page. On that page, my code works and neither of yours work.


#6

Interesting. I’ll check that. The above uses the Fa Meh icon that I used on a site. I’ll check the Mega Menu page for the default icon and see if it works.


#7

My bad. Adam is using a regular Nav Bar for the menu on the Mega Menu documentation page. I’ll have to test on a project.

This worked on a project containing a Mega Menu:

.foundry-mega-menu-toggle:before {
		content:"MENU ";
	}

Once we get a link from Jason, we should be able to do something for him.


#8

Yeah it seems there are some differences in code going on in my project vs Adam’s Potion Pack project file. Yours works fine there, so I’m going to delete my previous posts so as to not generate any confusion.

Yes, best to wait for a page URL from Jason for a definitive version.


#9

Thanks for the help guys!

I haven’t had the chance to check in today and try any suggestions. I’ll have a go once the Santa hangover is done.

Feel free to have a look though. The demo is currently at:
https://www.jbostick.ca/test/simplify/


#10

Don’s CSS does seem to do the trick when I try it in the web inspector on your page. :+1: