Thank you for that. I believe it is right. This is one of my old sites which was converted to RWD by someone else and I believe there is other stuff in the “Michaels” I assume I can shorten the referral down a bit be removing the “Michaels” what do you think?
The trelawnb
site shows that jQuery has been downloaded to that site in its directory structure somewhere. If you’re going to use the same approach on the site being discussed here, then you’d need to set up an equivalent directory structure, and then reference that as necessary - the path won’t necessarily be the same though, unless that’s how you choose to set it up.
Alternatively, you could choose to reference an external site for the jQuery file, probably on a CDN somewhere, which should make the page load a little quicker than pulling it from your own hosting. This page may help with that.
I am going to leave one more “off topic” post of general layout suggestions.
I have explained the reason for each of the changes that I have suggested all along. I hope you are retaining some of that information.
<begin>
At this moment, you are still triggering a horizontal scroll bar as the window is narrowed.
What’s causing it?
In the first rule set below, you have used {position:relative}
to move the <h1>
to the right and down a tad. That is a common beginner’s misuse of {position:relative}
. It is better to discretely apply a little padding and margin (if needed). {position:relative}
is only useful for moving elements in a few limited situations, otherwise it is most commonly used to establish a stacking context for a contained element with {position:absolute}
.
styles.css (line 217)
#header h1 {
color: #333;
font: bold 20px verdana,Helvetica,arial;
/* left: 50px; /* Delete Me */
/* padding: 5px 0 0; /* Delete Me */
/* position: relative; /* Delete Me */
/* top: -10px; /* Delete Me */
}
The better way is to apply padding and margin as needed and thereby avoid extending the <h1>
psst the right edge of the page. {Overflow:hidden} on #container was not a suitable fix for that overflow of <h1>
.
#header h1 {
color:#333;
font:bold 20px verdana,Helvetica,arial;
padding:4px 0 0 40px; /* ADD Me. */
margin:0; /* ADD Me. */
}
Next, look carefully at the blue footer and notice that there is 2px white space at the left end, yet, the right end is flush. Why is that?
#footer {
background: #33348e none repeat scroll 0 0;
clear: both;
color: #fff;
font-size: 12px;
font-weight: 500;
/* margin-left: 2px; /* I am useless, Delete Me */
padding-bottom: 5px;
/* padding-left: 5px; /* I am useless, Delete Me */
text-align: center;
width: auto;
}
Next, it is considered very poor form to use HTML <br>
eak tags as paragraph or container spacers.
In the #footer, there are several <br>
tags. You can delete all 3 of them and replace them by assigning top and bottom padding on the #footer for cleaner looking HTML.
And for good measure, you are advised to change all appearances of pixel or point sized fonts on your site(s) to ems, as shown below. That allows the font size to be changed by the user if the user so desires.
#footer {
background: #33348e none repeat scroll 0 0;
clear: both;
color: #fff;
font-size: 0.875em; /* WAS font-size: 12px */
font-weight: 500;
padding:1em 0 1.5em; /* WAS padding-bottom: 5px; */
text-align: center;
width: auto; /* NOT needed. width:auto is the default */
}
Cheers.
Thanks again Ron, Looking much better. Just need to change all other pages now as far as the
in the footer goes.Not sure if there is a little bit of white on right side of footer when I drag the page over on a desktop. I haven’t checked a phone yet. It appears to have come since the footer change in css.
Thank you, I have added ( <script src="/js/responsive_menu.js" type="text/javascript"></script>
) to down the bottom of the home page and referenced ( <script src="/js/jquery.min.js" type="text/javascript"></script>
) from the head section and now the "Hamburger " menu is starting to work, although I now have two menus. I think somebody earlier on mentioned about only having one set of menu references in the menu includes. Maybe this is the trouble.
Hello Sam,
You mentioned earlier about the double menu being referred to however if I simply delete one, when the page reduces we get nothing. Currently if you check it you will find our little “Hamburger” menu is working great when the page reduces, but the original menu does not go away. The mobile menu works great, drops down as it should. Any ideas?
Hi Ron, I have checked a phone now and there is some white space on right hand side.
Cheers, Graeme
Hello chrisofarabia, I have had a good look around today and at times I can get it to show the mobile menu at smaller screen sizes perfectly, but when I do that, I lose the main menu at larger sizes. I’m baffled where to go now. I have tried display: none; and this works as I mentioned at the smaller screen sizes perfectly, but then I loose my menu totally at larger screen sizes. I’m sure it is something simple but I can’t see the wood for the trees. Any ideas?
Thanks.
Hi, gracille.
I apologize for being slow to respond.
I feel sure that you realize that there are media queries that come into play at certain widths. If we look in responsive.css we find the following media query with a rule affecting #footer
.
In responsive.css (line 145) you will find the follow change being made to #footer
. That rule is causing the white space at the right end of the blue overlay and is completely unnecessary. The rule should be deleted.
@media only screen and (max-width:600px) {
#footer { /* DELETE the #footer RULE completely */
padding: 1% !important;
width: 98%;
}
}
May I ask what browser you use, please? FYI, I am most familiar with Firefox. Are you at all familiar with the developer’s tools in your browser?
Hello Ron,
Thanks for that. I thought as much but thought I didn’t want to play around if you also were looking for it.
I also use Firefox. I never thought of looking in developers tools.
Have you seen the mobile menu working now once it is resized down, however the original menu keeps showing so this is now my problem - how to get rid of it at smaller screen sizes. It is probably something very obvious but I can’t see it.I have had no reply from the guy that found the JS fault.
Cheers.
Hi, Graeme.
I can’t tell you how to do this with JavaScript, but this seems to work when performed manually (cut-n-paste).
This is your menu code at this time:
<div id="menu">
<ul>
<li><a href="index.php" title="HOME">HOME</a></li>
<li><a href="aboutus.php" title="ABOUTUS">ABOUT US</a></li>
<li><a href="services.php" title="SERVICES">SERVICES</a></li>
<li><a href="projects.php" title="PROJECTS">PROJECTS</a></li>
<li><a href="contact.php" title="CONTACT">CONTACT</a></li>
</ul>
<ul class="responsive">
<li><a href="index.php">HOME</a></li>
<li><a href="aboutus.php">ABOUT US</a></li>
<li><a href="services.php">SERVICES</a></li>
<li><a href="projects.php">PROJECTS</a></li>
<li><a href="contact.php">CONTACT</a></li>
</ul>
</div>
I think you can safely delete the second menu so this will remain:
<div id="menu">
<ul>
<li><a href="index.php" title="HOME">HOME</a></li>
<li><a href="aboutus.php" title="ABOUTUS">ABOUT US</a></li>
<li><a href="services.php" title="SERVICES">SERVICES</a></li>
<li><a href="projects.php" title="PROJECTS">PROJECTS</a></li>
<li><a href="contact.php" title="CONTACT">CONTACT</a></li>
</ul>
</div>
At the width where the mobile menu should appear and the desktop menu should disappear, just add class="responsive"
to the <ul>
. That will trigger the transition.
<div id="menu">
<ul class="responsive">
<li><a href="index.php" title="HOME">HOME</a></li>
<li><a href="aboutus.php" title="ABOUTUS">ABOUT US</a></li>
<li><a href="services.php" title="SERVICES">SERVICES</a></li>
<li><a href="projects.php" title="PROJECTS">PROJECTS</a></li>
<li><a href="contact.php" title="CONTACT">CONTACT</a></li>
</ul>
</div>
I have not been trying to follow the menu portion of this topic. If that concept has already been discussed, you mght re-read it for some “how-to” info. Otherwise, someone may be along here later today, or if you prefer, I can move this topic to the JavaScript category.
Hello Ron, Thanks for your continuing efforts trying to help. In the “includes” for the #menu I have removed the <ul class="responsive">
part and put it in the html on the page where the menu should go, however I still get both menus showing at all widths! Maybe I misconstrued part of what you meant.
At this stage I have only added the “responsive” menu to the html on the home page where you will see the mobile menu shows when it is reduced, but not on any other page - just the regular menu shows at any width. On normal width, (on my laptop) the word “menu” shows very faintly in black below the HOME button. As you drag the page in with your mouse, the faint black word “menu” disappears at a certain width, then continue dragging in still further the mobile menu appears perfectly, but still the original menu keeps showing.
If you check it on i-Pad in landscape the regular menu shows (without the little faint black word “menu” showing. Then when you turn the i-Pad to portrait the mobile menu appears perfectly, except the main menu is still there. Keep in mind as I mentioned this is currently only on the home page.
Regards,
Graeme
Graeme,
Are any backticks missing from your previous post? There seems to be something missing.
At this moment, I still see both sections of menu code on your home page.
The other pages do not show the hamburger icon in my browser, is that correct?
I assume that you are loading the menu on all pages via a php include.
So it seems to me that you have pasted a copy of the menu HTML on the home page below the php call and added class=“responsive” to that addition. Is that correct, or are you loading that additional menu with a separate php include?
At what width do you want the desktop menu to disappear and be replaced by the mobile menu?
Ron, I’ve added them in above. There’s only one small snippet of code that wasn’t visible.
Sorry for not getting back to you on this one. My time is a little constrained right now; I’m either in work or packing the house up for a move back to the UK in a little less than 3 weeks time. If I can find a few minutes later, I’ll see if I can take a closer look.
Hello Ron,
Yes, I realize now all I have done is move the responsive menu code direct into the html where it ends up anyway after being drawn from the includes file. The whole part of the #menu which you copied this morning is actually in a php include file. I went and removed the “class=responsive” from there (along the lines of what you suggested) and placed it directly into the html where the menu should appear. This is why currently you are seeing everything as was on the home page (both menus) and all the other pages do not show the Hamburger menu as they are drawing it all from the “includes” file and of course now the class=“responsive” is not there. So really we are no further ahead in doing what I have done - effectively it is like doing away with the “includes menu” file and placing both lots (as you are seeing) directly into the html. End result is the same.
Thank you Chris, you can read what Ron has been helping me with in the email trail.
OK, please follow the instructions in post #31 and remove the menu with the class=“responsive” entirely so that only one menu, the one without the class, remains on the home page. If that means changing the php include file, please do it. More than likely, it just means changing the php include call so you are importing the same menu file as the other pages import which does not have a class assigned (if my earlier speculation is correct). I’m trying to get rid of that mobile menu appearing on the home page right now. Do not change any CSS, just the HTML (or php file).
And I would like to know at what width you would like to see the desktop menu vanish and be replaced by the mobile menu.
I’m starting to repeat myself…
Hello Ron, I just found your reply on my phone so have done again what you have asked. However this time I have removed the Responsive Menu from the html on the home page. As I had already done that from the include menu this morning, the hamburger munu was not showing on any other page except the home page. I misconstrued what you said this morning and added it back into the regular html coding of the home page (where the menu should be) hence you were still seeing both menus…
As to the width we would like the mobile (Hamburger) menu to appear, I believe where it was appearing earlier this afternoon on the i-Pad was about correct. The i-Pad on landscape still had the regular menu showing and when turned to portrait the hamburger menu showed beautifully - along with my Samsung S7. But of course the regular menu was showing also. I hope I have made myself a bit clearer this time. Thanks for what you are doing.