Customizing the menu bar for mobile use

Also, is there a possibility to enter a paragraph (full stop) in the intro text? I mean the are that says ‘Visual Designer from…’ in my case.

Hi Ben,

First, please note that I provide support at https://support.webmandesign.eu/

I’m not sure why Google Search Console is not playing nice with your website. Please try to get more information about Google Search Console report and ask Google or search the webs for solutions.

I was never happy with that because it’s cropped off in the middle with most phones.

I’m not sure what you mean by this. Can you provide a screenshot? I do not experience such issue. Also, you can reposition the button with some custom CSS if needed.

In the end, I think that a menu bar on the bottom of the page would be a more elegant solution for phones – but I have no idea if this is possible to do or not.

Please note that I’m not really sure what exactly you are trying to achieve. This might be a specific usecase just for your website. You might achieve what you need with some custom CSS or they may be some additional coding required. But I suggest trying some mobile menu plugin first, maybe such plugin will help?

Also, is there a possibility to enter a paragraph (full stop) in the intro text? I mean the are that says ‘Visual Designer from…’ in my case.

Again, I’m not sure what you mean. You need to add an additional content in that section? If so, you could use custom PHP code in your child theme’s functions.php file:

function child_theme_intro_text() {
	if ( is_front_page() ) {
		echo 'MY HTML HERE';
	}
}
add_action( 'wmhook_modern_intro', 'child_theme_intro_text', 20 );

Best regards,

Oliver

Thanks again for the quick response!

I have experienced the issue with the cropped off ‘Menu’ bar when I still had the mobile menu enabled but I have disabled it now.

It would be perfect if the menu bar ‘follows’ the screen when scrolling. And, of course, that Google accepts my page as mobile-optimized… but that’s a whole different story.

I think two reasons as to why Google isn’t happy with my page is that
1) I added the following custom CSS to make my pages Design, Art and About wider:

@media only screen
and (max-device-width: 600px) {.post-2387 .entry-content{
margin-left:-15px;
margin-right:-15px;}}

@media only screen
and (max-device-width: 600px) {.post-2387 .entry-header{
margin-left:-15px}}

This seems to work fine with the Art and About page but you can scroll left/right on my Design page. No idea why.

2) I have an article pinned on my Writing-page. The page pin exceeds the limits which triggers the same error: you can scroll left/right when you shouldn’t be able to.

As for the intro text: I don’t wanna add more content but I would like to add a full stop and a paragraph (Enter on the keyboard). The intro section always deletes ‘unnecessary’ white spaces, stops and paragraphs…

Thanks a lot!

Regards,
Ben

btw this was what I meant with cropped off Menu bar. Might have something to do with my navigation bar.

https://pasteboard.co/IUgiZNc.jpg

Hi Ben,

It would be perfect if the menu bar ‘follows’ the screen when scrolling.

It actually does for me. Please note that I have no control over how any phone might display the menu button, but I’ve tested on iPhone and Android phones and all works fine for me.

1) I added the following custom CSS to make my pages Design, Art and About wider:

If you are able to scroll the mobile page horizontally, then this is an issue indeed. Try adding an additional body { overflow-x: hidden; } style to prevent this.

The horizontal scroll is always the issue. The theme does not produce that, so this most come from your content or customizations you’ve made. Please check those to resolve.

As for the intro text: I don’t wanna add more content but I would like to add a full stop and a paragraph (Enter on the keyboard). The intro section always deletes ‘unnecessary’ white spaces, stops and paragraphs…

Can you provide a screenshot of where you are adding this text?

btw this was what I meant with cropped off Menu bar. Might have something to do with my navigation bar.

Could this be related to phone interface? What happens when you scroll the page? Does the bottom bar disappear?

Best regards,

Oliver

Hello Oliver,

Here is a screenshot I will refer to later:

https://pasteboard.co/IUEbDWG.jpg

If you are able to scroll the mobile page horizontally, then this is an issue indeed. Try adding an additional body { overflow-x: hidden; } style to prevent this.

This worked perfectly, thanks!

The horizontal scroll is always the issue. The theme does not produce that, so this most come from your content or customizations you’ve made. Please check those to resolve.

I think the issue wasn’t the theme but WordPress itself. On my start page I have a pinned post (see 2 on screenshot) that produces an overflow. It would be easier if I could make that star invisible or at least not have it produce the overflow.

Can you provide a screenshot of where you are adding this text?

I would want to add a full stop and start in a new line after 1 (see Screenshot), however, white spaces and new paragraphs are always deleted when entered.

Could this be related to phone interface? What happens when you scroll the page? Does the bottom bar disappear?

Yes, I do think so too that it has to do with the interfaces, however I’ve tested it on three phones that all produce the same error (cropped off menu bar). When you scroll down it does appear in full and is being cropped again when you scroll up.
However, for me that’s not an issue anymore because I disabled the mobile menu bar due to this. Just wanted to let you know.

You are truly awesome – thanks a ton for your support!

Regards,
Ben

Hi Ben

Please try using your web browser code inspector to determine the CSS for your theme modifications. Please understand I can not provide thorough help for those.

If the sticky post star is the issue, please use this CSS:

.posts .sticky::before {
	right: 0;
	top: 0;
}

To set custom HTML for homepage intro text you can use this PHP code in your child theme’s functions.php file:

function child_theme_intro_title() {
  return 'My HTML here...';
}
add_filter( 'wmhook_modern_intro_title', 'child_theme_intro_title' );

function child_theme_title_tag() {
  return 'div';
}
add_filter( 'wmhook_modern_title_tag', 'child_theme_title_tag' );

Like I’ve mentioned, I don’t experience the issue with mobile menu on any device I test. Have you been logged into your website maybe? Could this be related to WordPress admin bar being displayed when previewing the site on mobile?

Regards,

Oliver

Hi, how can i change text “menu”, from menu on mobile phones menu bar? Because in slovakia translate is “Jedálny lístok” thats mean menu from restaurant. I need change it. What file have this text in theme editor?
Thank you

Hi @kvak0,

Thanks for spotting this! I have fixed the translation of this text and you should receive updated translation via your WordPress update.

Regards,

Oliver

Hi there. Made everything work except for the full paragraph on the intro text but I can live with that.

I have another question: Is there a way to deactivate the ‘Continue reading’ and possible comment counter (not date) on the blog post? For that’d be the landing page (benleander.com).

Thank you!

Hi,

Please understand I provide support at https://support.webmandesign.eu/ and as this is a new question, you should really create a new support ticket.

Try using your web browser code inspector to determine the custom CSS for your theme modifications.

Use this custom CSS to hide the requested elements on your homepage:

.home .link-more,
.home .comments-link {
	display: none;
}

Regards,

Oliver

Thank you very much, Oliver, this worked perfectly!
If I have further questions I’ll open a new ticket!

Cheers
Ben