Hello there, I am hoping someone can cast their eye over the coding of a site I have just built. The site is www.bolsterpm.com The menu does not show as mobile on a small screen (the small square top right with the 3 bars in) - the regular menu shows, just a bit smaller. It is clickable, but should show correctly. Can someone please indicate where I have gone wrong. I think it will be something very simple, but what?
Thanks,
Graeme
Hi @graecille and welcome to the SP Forums.
I had a quick look and noticed the HTML Validation checks out OK but the CSS fails on quite a few points. It may may a difference if most of the errors were removed.
1 Like
Hello John,
I take your point. I have tidied it up a bit, but it hasn’t made any difference. For my problem, I think something is missing, but I don’t know what. That is why I thought a fresh set of eyes checking all the code may pick up something blindingly obvious which I am missing.
1 Like
One thing I did notice was the error message against a JS file. I’m not sure it’s directly related, but it might be worth checking out.
You’ve done a nice job of cleaning up the validation errors in the HTML and those in the CSS. 
I would like to make a few additional code writing suggestions that have nothing to do with the JavaScript menu.
Your site triggers a horizontal scrollbar as soon as the viewport narrows to 960px. 
I see several fixed widths on primary (first and second level) containers. Also, there are several elements with a width of 100% applied. In most cases, Fixed widths are unnecessary and should be replaced with max-widths so they become narrower as the viewport becomes narrower. Likewise, most block elements normally fill the full width of the available space by default, so a width of 100% is unnecessary - and can be problematic if you have also applied paddings or margins to the element because then the element is actually more than 100% wide. You need to review your site to eliminate the contrary fixed widths.
One way to help the “width” situation is to apply {box-sizing:border-box;} to the html element like this:
html {
box-sizing:border-box;
}
*, *::before, *::after {
box-sizing:inherit;
}
The fit of your images will benefit from the box-sizing property.
It’s not a cure-all, so you need to read-up about it and understand it. This is a good place to start.
Is padding property and width-height property are interrelated?
When reading your CSS if find code for #container in 4 locations. You need to be familiar with your browser’s dev tools to be aware with what is being done where. I find it better to keep the code for one selector in one location (there may be alterations in media queries) to avoid conflicting styles such as these:
css/responsive.css (line 175)
#content {
margin: 2% !important;
padding: 2% !important;
width: 92%;
}
css/responsive.css (line 104)
#content {
clear: both;
display: block;
float: none;
margin: 1% !important;
max-width: 94%;
padding: 2% !important;
width: 94%;
}
css/responsive.css (line 13)
#content {
margin: 1% !important;
padding: 1% !important;
width: 55%;
}
style.css (line 311)
#content {
border: 1px solid #ccc;
float: right;
margin: 30px 30px 30px 10px;
overflow: hidden;
padding: 0 15px 15px;
text-align: justify;
width: 555px;
}
If your CSS is sequenced correctly, there should be no need for the !important modifiers in the media queries.
There are many more things that you could do to “clean up” the behavior of your site and the code, but this is a step in the right direction.
3 Likes
Hello Ron,
Thank you for the help so far. However I think you have gone a bit too far & too quickly for me. In other words, where do I start? Are you saying I should remove some of those (or all bar one) Content areas? I have relisted all Content in the order you had written them (I had them out of order). Albeit all 3 are still there. I have also added the html box-sizing to the css/styles.css as you suggested.
Are you saying the horizontal scrollbar has something to do with the menu dropdown not showing on small screens? Can you please list what and where I should be changing there.Thanks.
Nothing that I mentioned affects the menu… yet.
The page still triggers a horizontal scroll bar at widths less than 960px but that is because you overlooked one fixed width. There are two possible ways to fix that one…one is to change width to max-width…
styles.css (line 587)
#seo {
max-width: 960px; /* changed from width to max-width */
text-align: right;
padding-top: 5px;
margin: auto;
}
You could also include seo in #container (that frames the entire page) by moving the close #container div after the close seo div. In that way, seo needs NO width or max-width at all.
1 Like
Thank you for that. It has made a big difference - can’t scroll the right to the left now, so that is good. Now where? By the way, do I need to change anything in the responsive.css relating to this?
Well, I’m not sure how the widths of #menu were decided.
For example, #container is the outer container (the framing container) for the page and has a max-width of 960px. That’s cool.
style.css (line 195)
#container {
background: #fff none repeat scroll 0 0;
color: #333;
margin: 0 auto;
max-width: 960px;
overflow: hidden;
padding: 0;
}
However, one level inside #container is #menu and it appears that #menu still has a fixed width of 960px here:
style.css (line 244)
#menu {
background-color: #33348e;
font-family: verdana,arial,times,serif;
font-size: 8pt;
overflow: hidden;
padding-left: 30px;
width: 960px; /* unnecessary */
}
It really does not need any width assigned. Since it is a block element, it will stretch the full width of the available space by default.
BUT, if you delete that width from #menu, at the first breakpoint, the menu develops a bit of white space at the right end. Why?
To find out, we go to the responsive.css and find the following conflicting properties being applied.
responsive.css (line 9)
#container {
margin: 1% !important; /* purpose unknown, !important modifier unwelcome */
max-width: 98% !important; /* purpose unknown, !important modifier unwelcome */
}
responsive.css (line 33)
footer, #menu {
width: 98%; /* purpose unknown */
}
neither the footer nor #menu need a width of less than the default (auto) applied, and next…
#menu is being told to inherit the width of its parent container which has a width of 98% applied in that media query, too.
responsive.css (line 48)
#menu {
max-width: inherit; /* purpose unknown */
padding: 1%;
}
Neither footer nor #menu need a width of less than the default (auto) applied, so those three responsive.css width properties do not appear to be serving a useful purpose.
I would delete them as indicated. You’re the designer. What do you think?
1 Like
Thanks again Ron, you are helping immensely. I know, basic things, but I’m a 70 year old still coming to grips with a lot of RWD. I do it as a hobby to keep the mind from creeping towards dementia. Anyway, I think it is better than just dropping dead and better helping younger people out. I am in Australia but this site is for a home handyman in Canada hence why I’m reaching out for help.
To think last night a lot of 70 year olds couldn’t do the census on line!!
So where to from here??? Looks ok on mast platforms, but still no proper phone menu.
By the way, if I don’t answer you tonight you will know it is after hours here in Australia.
3 Likes
One thing, not directly related, but you have
font-family: verdana,arial,times,serif;
It is odd to start with a couple of sans-serif fonts and then use Times and serif as backups. Usually you would have (say) Helvetica and as the final one, sans-serif.
1 Like
I would like to recommend a couple more changes then I might go to bed, too.
First we need to revisit the #seo container. You chose to delete the fixed width but forgot to enclose seo in #container by relocating the close </div> for #container so it is after the close #seo </div>. You then need to go back to #seo on the style.css, around line 580, and add the same background-color to seo as you have applied to #promo so it matches the body background.
Then go to #container on style.css, around line 188 and delete {overflow:hidden} from that container permanently. It is not a good idea to put overflow:hidden on the outer framing container, and at this stage we need to be aware of any elements that may be overflowing the edge of the page for any reason.
Finally, a reminder to everyone who reads this that I am supplying assistance with some general layout issues, but not the mobile menu (which is the subject of this topic). I don’t speak JavaScript; so, anyone who is familiar with JS, please feel free to help with the mobile menu.
I don’t quite understand how you are trying to make the menu work.
I don’t see any code in there to create a “hamburger” menu icon.
I notice you have two identical menus, one with the class .responsive, I’m guessing that is meant to be the mobile menu. But I don’t see any media queries to show/hide the menus. Also you should not need to repeat the menu, they are identical in structure and content, so you should be able to just use the same menu and re-style it for mobile in a media query.
3 Likes
Going back to the JS error being flagged in the console for a minute, I had a couple of questions:
- Where did the JS that’s being referenced originate from?
- Do you happen to know whether that file requires jQuery to operate, if so, I can’t see it being called in anywhere?
- Do you happen to know why that file is called in the
headof the document, rather than just before the</body>tag?
This is the content of the file showing the error.
$(function() {
$("#menu ul.responsive").addClass("responsive-menu").before('<div class="responsive-menu-icon">MENU ≡</div>');
$(".responsive-menu-icon").click(function() {
$(".responsive-menu").toggle();
});
$(window).resize(function() {
if (window.innerWidth > 720) {
$("#menu ul.responsive").removeAttr("style");
}
});
});
My JS isn’t exactly world class yet, but those were the first questions that occurred to me.
Thanks for that.
Thanks for that Ron. Have done all that - I think!
Hello Sam, I believe you are right! But where?
Hello Chris, I believe you are correct. The problem probably lies in the java script somewhere. As to it needing a jQuery to operate, I don’t know.
As to the file being called up in the section, that’s where the template had it. The other one is down the bottom just before the as you mention the upper one maybe should be also.
I have another site http://www.trelawnb-b.co.nz/ where the responsive menu is working. I cannot find where the mistake with this one is.
Whenever you see JavaScript variables with “$” you can almost be sure it’s jQuery.
You need to call jQuery in before anything that depends on it being there will work.
For example, the page you linked to where the menu works has
<link rel="stylesheet" href="/MichaelsVLB/engine/css/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="/MichaelsVLB/engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="/MichaelsVLB/engine/js/jquery.min.js" type="text/javascript"></script>
<script src="/MichaelsVLB/engine/js/visuallightbox.js" type="text/javascript"></script>
jQuery is installed in your header:
<script src="/MichaelsVLB/engine/js/jquery.min.js" type="text/javascript"></script>
<script src="/MichaelsVLB/engine/js/visuallightbox.js" type="text/javascript"></script>
Try including those lines in the site that is not working,
Ideally the lines should be installed immediately before </body>