Mobile Menu help

[minicooperz00]

Hello, I’m a little outdated with coding. I just built my first website since about 20 years ago…back when nobody was concerned with a mobile menu. I only really know desktop coding. I used a WordPress.org YITH block theme. I have sent the website to multiple peers for review and received the same feedback.

The hamburger icon is too small and lacks the word ‘MENU’…many missed seeing it which isn’t good

Second, the mobile sub menu has difficult to read colors and contrast that does not go with the theme of the website

I’ve tried editing with the WP software editor in code mode, AMP, Elementor, ect…cannot figure it out. I am totally lost! I can’t even see the code on the software.

Here is the mobile menu…the theme is orange and black

[minicooperz00]

Here is the hamburger icon…showing the theme colors

[ralphm]

Hi @minicooperz00 . You’ll need to post a link to the site, as that’s the only way we can suggest code changes. There are various ways to update a WP theme — none of them particualrly intuitive, IMHO, but never mind.

[minicooperz00]

Sure, I didn’t know if direct links were prohibited.

Home - Palm Beach Auto Club

[PaulOB]

Hi, I don’t do wordpress but from a css point of view you can change the color of the blue and black menu with the following code which will also add the word “menu” after the hamburger.

.wp-block-navigation:not(.has-background)
  .wp-block-navigation__responsive-container.is-menu-open {
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 18%,
    rgb(22, 26, 29) 18%
  ) !important;
  color: #fff;
}
button.wp-block-navigation__responsive-container-open:after {
  content: "MENU";
  font-weight: bold;
}

That code will need to go in your custom css file which should follow after all the original css. You will have to ask in a wordpress section how to add custom css but I assume you can do it via a control panel or something similar.

With that code in page those two items will look like this:

[minicooperz00]

I found the custom CSS field and the code generated this…very close to what I was looking for! Can you assist to adjust every so slightly?

Can you shift the word “MENU” to the right one space and change the color to black to match the text above it? Can you increase the size of the hamburger icon?

Also, on the navigation menu the black background cuts off and the default gray/blue is revealed below it…can this be fixed?
photo on next post due to limit…

[minicooperz00]

code for menu with blue at bottom

[PaulOB]

Try changing the two rules I gave you so that they now look like this:

body .wp-block-navigation:not(.has-background) 
.wp-block-navigation__responsive-container.is-menu-open {
background:rgb(22,26,29)!important;
color:#fff;
}

button.wp-block-navigation__responsive-container-open:after {
    content: "MENU";
    font-weight: bold;
    color: #000;
    margin-left: .8rem;
}

Adjust the margin-left on that last rule to put the word (MENU) at your required position.

[minicooperz00]

This worked, thank you so much! The WP support form couldn’t even answer this question and you got it!

One more coding question.

This is on the services page near the bottom, on desktop it displays correctly. It’s the superscript key with terms from above on the page. On mobile it cuts off part of 2 and all of 3 & 4. How do I fix this?

[PaulOB]

You could make them go vertical with this code:

@media screen and (max-width: 550px) {
  .wp-container-core-group-is-layout-55 {
    flex-direction: column !important;
  }
}

However I don’t know if that class (wp-container-core-group-is-layout-55) is used anywhere else. If it is then you would need to add a custom class on that element or select a class that is unique for that element.

[minicooperz00]

That worked! The group isn’t used anywhere else so the code works. The website works for mobile now! Thanks so much!

[PaulOB]

I notice that on small screen (iphone SE) your heading (Palm Beach Auto Club ) has the word “Beach” split over two line with just the “h” on a line by itself.

Try adding a min-width to stop this happening.

:root :where(.wp-block-site-title){
min-width:7rem;
}

[minicooperz00]

I added it, I don’t have a small screen phone but on the WP preview it appears to have fixed it. The only other thing I see on their small screen preview is words being cut in half on the service page in the heading names.

[minicooperz00]

Further thought…can I just remove the text (the company name) from the mobile version in the heading and just use the logo? I want to leave the text on the desktop version. The header looks cluttered on the mobile version.

[PaulOB]

@minicooperz00

can I just remove the text (the company name)

You could remove the text for small screen but it might be better to perhaps make the heading a little smaller and reorganise it a bit better.

It would be a shame to remove the most important text on that page.

[PaulOB]

Maybe something like this:

@media screen and (max-width: 620px) {
  header.wp-block-template-part .wp-block-group {
    display: block;
  }

  header.wp-block-template-part .wp-block-column {
    display: flex;
    flex: 1 0 100% !important;
    align-items: center;
    flex-direction: column;
  }

  header.wp-block-template-part .wp-block-site-logo,
  header.wp-block-template-part .wp-block-site-logo img,
  header.wp-block-template-part .wp-block-site-logo a {
    display: block;
    margin: auto;
  }

  header.wp-block-template-part  h1 {
    text-align: center;
    font-size: 1.5rem;
  }
}

Iphone SE size:

Rather than the way it was before which was like this:

[minicooperz00]

I added it, I see it display like that on a regular iPhone which looks great, the SE preview window shows that it cuts the word club to the next line.

[PaulOB]

This is a screenshot from my real iPhone SE

I’ll have another look tomorrow when I’m back on the desktop.

[PaulOB]

@PaulOB

I’ll have another look tomorrow when I’m back on the desktop

Looks ok to me at the iphone SE size but at very small sizes (like an old iphone4 at 320px) the last word will wrap but looks ok to me.

You could just reduce the font-size a little bit more to stop that happening.

Try these two extra fixes.

.wp-block-column[style="flex-basis:70%"]{
flex-basis:100%!important;
}
@media screen and (max-width: 374px) {
  header.wp-block-template-part  h1 {
    font-size: 1.3rem;
  }
}

[minicooperz00]

@PaulOB

.wp-block-column[style="flex-basis:70%"]{
flex-basis:100%!important;
}
@media screen and (max-width: 374px) {
  header.wp-block-template-part  h1 {
    font-size: 1.3rem;
  }
}

I got this updated