Rowling

tassitus · Member · Apr 21, 2016 at 7:53 pm
Copy link

Add topic to favorites
Just applied the theme Rowling. Very nice.

From what I can see, though, the hamburger menu doesn’t work. When I view my page tassitus on the iPhone, I tap on the hamburger, it turns into an X but nothing else happens.

Am I missing something here?
sarahblackstock · Member · Apr 21, 2016 at 8:19 pm
Copy link
Eek! You’re right. I saw the same thing in Chrome, Safari, and Firefox on an iPhone, and in Chrome on an Android phone.

Thanks for letting us know! I’m going to report this issue and will update you here as soon as I’ve got more info! :)
sarahblackstock · Member · Apr 21, 2016 at 8:29 pm
Copy link
Ah, actually… I see what’s going on.

The menu works on the demo on mobile, so I dug into it a bit more and the one that the Hamburger Menu uses is the menu assigned to “Bottom Header Menu (below branding)” — yours is currently empty.

If you add items to the Bottom Header Menu, you should then see it expand to display that menu when you tap the hamburger menu. Can you try that and let me know if that works or not?
tassitus · Member · Apr 21, 2016 at 8:37 pm
Copy link
Yes, it does work, when I move the main menu to ‘bottom’.

But still … hmm 🙂
sarahblackstock · Member · Apr 21, 2016 at 9:05 pm
Copy link
Glad it’s working now, at least, instead of just that X. I thought of a workaround that might work for you…

If you want to only use the Top Header Menu on your site when viewing on your computer and have no need of the Bottom Header Menu, and also want to have links show up in your Mobile/Hamburger Menu, you could hide the bottom menu with CSS when on a large screen and have it only show when the screen is small enough to need the hamburger. (Does that make sense? It’s confusing to explain now that I’m trying…)

In case you want to try it out to see what I mean, here are the steps:

First assign the same menu to both Top and Bottom Header Menus. Now you’ll see the same menu above and below your header.

Then, go to Customize > CSS and add this:
```
@media screen and (min-width: 850px) {
	.navigation {
		display: none;
	}
}
```
Now you should see the menu above your header on your computer, then from mobile see the hamburger menu displaying the bottom menu (which is the same now).

Hope that made sense. Let me know if you have any questions! :)
tassitus · Member · Apr 21, 2016 at 9:11 pm
Copy link
Yes, it makes total sense. Thank you! I’m going to try it, because I like the theme.

The only reason I didn’t use the bottom menu in the first place, was that the background colour of that ‘bottom menu’, doesn’t go all the way out (if you see what I mean), as the colour of the header. It made my OCD-senses tingle 🙂
sarahblackstock · Member · Apr 21, 2016 at 9:21 pm
Copy link
Haha. Understood! :)

Pop back in with any questions if the CSS trick gives you any trouble!
tassitus · Member · Apr 21, 2016 at 9:23 pm
Copy link
I’ve already applied it, and it worked like a breeze. Very happy …

Thank you, for great, friendly support 🙂
sarahblackstock · Member · Apr 21, 2016 at 9:25 pm
Copy link
Awesome. Glad it worked! And you’re welcome! :D

No items found.