Support » Theme: Modern » Customizing the menu bar for mobile use

  • Resolved gragaer

    (@gragaer)


    Howdy!
    Me again. I know.

    Google is getting on my nerves; in Search Console it states that there are mobile errors with my page and now there’s even a remark that my page isn’t ‘mobile optimized’ when searching in Google.

    In an attempt to solve this I wanted to change the standard menu button on mobile phones – the one that’s usually on the bottom of the screen and says ‘menu’. I was never happy with that because it’s cropped off in the middle with most phones. So, I disabled the mobile menu in the Costumizer.

    Now, I have the same menu on desktop as well as mobiles (with the exception that I deleted the search bar for mobile devices). The only difference is that the menu bar on the phone doesn’t follow the screen when you’re browsing.
    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.

    Thanks already for any insight on how to make Google believe my page is optimized as well as customizing that mobile menu.

    Ben

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • 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.

    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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

    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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

    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.