Help needed on mobile menu

Hang on to that thought and we’ll talk about it after the next series of changes (there aren’t many).

The following code only contains a few changes. I am copying the whole thing because I’m not positive that I can identify each item that was changed… that, plus formatted code is easier to read than left-aligned code. :slight_smile:

If you will copy and paste this code (replace the original with this) into the appropriate portion of style.css, the look of the menu will improve a bit.

style.css (lines begin at 171)

/* main menu */

#menu {
    background-color:#33348e;
    font-family:verdana,arial,times,serif;
    font-size:.9375em;
    overflow:hidden;
    padding-left:30px;
}
#menu ul {
    padding:0;
    margin:0;
}
#menu ul li {
    list-style-type:none;
    float:left;
    position:relative;
    padding:0;
    margin:0;
}
#menu ul li a {
    display:block;
    color:#fff;
    padding:.875em 10px;
    margin:0;
}
#menu ul li a:hover {
    background:#fff;
    color:#33348E;
    text-decoration:underline;
    font-weight:normal;
}
#menu ul li.current_page_item a {
    background:#fff;
    color:#33348E;
    text-decoration:underline;
}

After you have finished editing and testing the code in the previous post, please explain why you have not replaced the viewport meta tag as suggested. Unless you have a compelling reason otherwise, I still think you should replace it with the non-restrictive version below.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ok, all uploaded. That has widened the blue background quite a bit at all widths. Maybe a bit too wide, but still ok I guess.

Have also added the viewport as suggested. That is done in the meta includes so all pages are the same. I didn’t realize you had told me about that one before.

Maybe “widened” is not quite the word. Maybe deeper would be a better way of describing it.

Does it match my actual size, non-zoomed screen shots? or is it taller than the menu in my screen shots?

Never mind, I looked myself

One more deletion, please:

responsive.css (line 50)

#menu {
    padding: 1%;
}

 
The font-size is slightly larger. That was my doin’s. I felt the original size was too small. One can change the font-size easily enough.

Now it looks like the screen shots.

Ok, have removed line 50 #menu but doesn’t seem to have made very little difference.

Agree the slightly large font does look better on my phone.

With that 1% padding in place, compare the height of the menu bar when the browser is open to the full width with text items showing (it’s shorter) to the height of the menu bar when the hamburger menu alone is visible (it’s taller because it is being added in the responsive.css file). The difference is obvious to anyone who sees that change. Deleting that padding reduces the difference to insignificance.

So DO delete that padding :slight_smile: I had marked it to be deleted but overlooked sending the notice to you. Cluttered notes. :paper-shuffle:

If there is another height that is bothering you, or if the height at which the menu is set now seems too tall, it can be reduced a tad if needed.

I think overall now it is looking good. I had already deleted that padding relating to line 50.

That is probably because the breakpoint (media query) at which the hamburger menu is being called is 720px now instead of 960px (the full page width) as it was before.

I don’t recommend catering to specific devices or calling the hamburger menu any sooner than needed, but if you feel otherwise, you can change the media query to something wider than 720px.

No I think we will leave it as you recommend.

Have I forgotten to address anything that you asked?

Ah, yes, the boxes on the Service page. How far would you like to go to improve that page? Not in miles, just in terms of work?

I can see about applying the text-align:justify last row fix, if you’d like, or we can explore a few other possibilities that would probably work better including flexbox.

Hi Ron, I think we should keep it simple. It is not like it is a multi dollar site. It just has to look ok to the average Joe. Maybe the problem is similar/same as that on the gallery page also - last line there the same problem.

Hi Ron,

I’m assuming you have gone to bed now too. So am I. Turning off and will check in again tomorrow. Cheers.

I’ll be turning off the lights pretty soon.

You can fix the last row of the Services images by adding the following CSS. I inserted it into styles.css at line 272 right after #lightboxcontent.

#lightboxcontent:after {
    content:"\00a0";
    display:inline-block;
    width:100%;
    outline:1px solid pink;   /* TEMPORARY TEST only.  To Be DELETED. */
}

A side effect of the technique is that it adds a bit of space beneath that last row of images. I drew a pink outline around the space so you can see where it is. You can delete that outline whenever you wish.

The problem with the Projects gallery is the same but they galleries are constructed differently. I’m not likely to be able to fix the Projects gallery. If someone else hasn’t offered a solution by tonight, I’ll give it a go, but with little hope of success.

Hi Ron,

Thanks so much for that. It works perfectly. Incidentally I tried the same on the Projects page by removing the id widecontent and replacing it with the id lightboxcontent and it appears to have more or less worked. However now the images are not centered but at least all rows are equal even dragging the page in from 5 images wide, to 4, to 3 to 2 and eventually one. All nice and even except for the left margin/padding. Please let me know if I have gone off on the wrong tangent and I will put it back how it was for you if you have something else in mind.
Best regards,
Graeme

Just had another thought. Could probably copy the id lightboxcontent, rename it id projectscontent (or something) and then add some left padding or some other way to float them in the center/evenly across the page with even white space at the edges.

Hi, Graeme.

I had tried the same “fix” on the “Projects” page as worked on the “Services” page, but it didn’t work on the “Projects” page.

Would you mind restoring the previous styles for the “Projects” page? Since it was “mostly working” then, that seems like the best place from which to continue.

Thanks.

Hi Ron, I see you are up. Have you looked at the live version of the page?

Yes, I did.