Submenus on Mobile Devices

I took a look at the rendered code for your site and noticed the unordered-list element for the sub-menu specifies the style attribute without an assignment:

<ul class="sub-menu" style>

I looked backwards and saw the style for the unordered-list of the main menu is initially set to “display: none;”, but changes to “display: block;” when the main-menu button is pressed. So, I tried manually setting the style for the sub-menu and it shows up beautifully:

<ul class="sub-menu" style="display: block;">

My educated guess is that the assignment of the sub-menu style to a variable was mistakenly left out in the theme’s code. I could figure out how to fix it, but it would just be overwritten once the next update rolls out. Plus, everyone needs to benefit from the fix, including my client. This is one for the theme developers.

Aren’t you using the paid version of Foodeez?

If so, you will likely get a more immediate and official response by reporting this to the theme developers. But, thanks for posting here so us freeloaders know about it.

Your website looks great, by the way.

Hey David,

Thanks for checking that out.

I am not using the paid version – so hopefully this will still get some official response!

I run a child theme under the foodeez-lite so that I can make styles.css changes and not have them over-run on an update.

I tried adding the following code:

#skehead .sub-menu {
	display: block;
}

The result was that the sub-menu items were always displayed – not what I’m looking for. So I tried this instead:

#skehead a:hover + .sub-menu {
	display: block;
}

This allows the sub menu items to show upon hover – which is what I want – though you cannot access the sub-menu items because when you move your cursor from the “Bakery Offerings” the hover is no longer in effect and I can’t figure out what sub-menu elements are…

I’m leaving it up with the hover code active so you can see what I mean. Any thoughts?

I’m a newbie at this, so any help is greatly appreciated!

Chris