Peter Müller

I am adding this to our issue tracker and we will try to improve this in one of the upcoming updates of Astra Theme.

That’s great news, and thanks in advance.

Thanx for your answer (and the screenshot, those are very helpful here in the forum) and I do appreciate it.

A custom link with a # is a simple workaround to prevent the flashing of the dropdown that I described in the first post above, but it is not quite what I am looking for.

My ideal solution would be:

on desktop
– menu-item Blog is a link to show all posts
– on :hover with mouse the dropdown menu for Blog is shown
– a click on a submenu item then shows a post per category
– a click on Blog then shows all posts

on touch
– menu-item Blog is a link to show all posts (just as on desktop)
– a first tap opens the dropdown menu for Blog
– a tap on a submenu item then shows post per category
– a second tap on Blog however shows all posts

You can see this in action pmueller.de with the menu-item “Blog”.

Just for your information:

I use GeneratePress on some of my sites and they just fixed this issue in Version 2.3:

?Fix: Sub-menu dropdown on tablets/touch screens?

So now the submenu appears on :hover, and is still usable on tablet/touch. I don’t know how they did it, but that proves that it is possible ??

Just to let you know: I updated Gutenberg to 5.9.2, and now the heading shows up properly.

Problem solved.

• This reply was modified 5 years, 9 months ago by Peter Müller.
• This reply was modified 5 years, 9 months ago by Peter Müller.

Thanx!

As I said: the table of contents works fine.

BUT: in the grey box there should be heading “Table of Contents:” (or “Inhaltsverzeichnis:” in German), and that simply is not there. Not in the frontend and not in the source.

See https://www.ultimategutenberg.com/blocks/table-of-contents/ for what I mean. There you’ll find this in the source:

<div class="uagb-toc__title">Table Of Contents:</div>

And that is missing on my page.

I got used to the three dots and will leave them for now, but if I want to get rid of them I now know how.

One idea: If the Hellip had a little markup it would be easier to target it with CSS.

Thanx
Peter

• This reply was modified 5 years, 9 months ago by Peter Müller.
• This reply was modified 5 years, 9 months ago by Peter Müller. Reason: Typos

Hi Deepak,

thanks for your reply, but I consider changing the breakpoint for the mobile menu a workaround and not really a solution.

Tapping the icon in the mobile menu works fine and shows the dropdown-submenu.

Tapping the link however works the same as in the desktop menu. A tap does not show the submenu, but activates the link and immediately calls the linked page or post. The submenu can be seen as a flash, but it is impossible to choose a link from it.

So that takes me back to square one and to my subject line:
“Dropdown menu on iPad not usable?”

I really like Astra and Brainstorm Force have done a phantastic job, but is there really no solution to this menu-touch-problem?

• This reply was modified 5 years, 9 months ago by Peter Müller.

I found them three dots ??

They are created in the file inc/blog/blog-config.php, line 188:

$output = ' &hellip;<p class="read-more"> ' . $post_link . '</p>';

… is the three dots ... above the paragraph, without any markup whatsoever to style or hide them.

Do I have to create a child theme to change or remove the “hellip”?

Or is there an option somewhere that I haven’t found yet?

• This reply was modified 5 years, 9 months ago by Peter Müller.
• This reply was modified 5 years, 9 months ago by Peter Müller.
• This reply was modified 5 years, 9 months ago by Peter Müller. Reason: small corrections for `code`
• This reply was modified 5 years, 9 months ago by Peter Müller.

Workaround:

• Customizer – Layout – Primary Header
• Set Menu-Breakpoint for mobile Header to 1024px

After that an iPad in landscape shows the mobile menu and in that the dropdown works fine (funnily enough).

• This reply was modified 5 years, 9 months ago by Peter Müller.

Thanks a lot. That was exactly what I was looking for ??

Thanx, it seems to work.

I have now redirected my index.html to index.php so you can’t check it anymore ??

• This reply was modified 6 years, 1 month ago by Peter Müller.
• This reply was modified 6 years, 1 month ago by Peter Müller.

Here is my site URL:

https://groningen-info.de/

If you add index.html you will find the error.

My Search Console is in German so a screenshot won’t be very helpful, but that was only the reason I discovered the error. The error just states that the page index.html is not mobile friendly. Which is true. No viewport set and text too small.

The problem however is not Google Search Console reporting the error, the problem is that there IS an index.html in the first place.

Hope to have made myself clear here ??

I have the same problem. Any news on it or any solution available?

I only realized the problem as Google Search Console gave a warning for “index.html” in the section Mobility Usability as the error page is not mobile friendly.

I’m not sure if that is possible out of the box as the concept of Fukasawa is as follows:

• Viewport > 1000px show full sidebar and content
• Viewport < 1000px show sidebar logo, content and menu button

The rest of the sidebar (everything underneath the logo) is hidden with CSS:

.main-menu, .widgets, .credits {
    display: none;
}

At the same time the mobile menu only shows the primary menu. To add anything to the mobile menu you will have to add it to the primary menu, and you cannot add a widget to a menu (at least until everything like widgets and menus are a block, but that will still take a while).

—
Here’s an example of a similar problem:

In Germany we have to make links to Impressum (Imprint) and Datenschutz (Privacy) available with one click:

• On desktop these two links were at the bottom of the sidebar.
• On mobile the links they were not there.

I did not want the links in the main menu, so I created a child theme and added the two links manually to the header.php after the primary menu is loaded.

That is fairly easy, but to include a widget like Mailchimp’s form is not as straightforward as widgets can only be added to a widget area.

Before you ask: I wouldn’t know how to do that ;-(

• This reply was modified 6 years, 2 months ago by Peter Müller.