Hello All,
Bit of a big ask! I have a website that is displaying fine, however, I have code stup in both my CSS & HTML for a hamburger menu on a mobile phone, I copied the code from another website where it is showing great. Would you be able to have a look & tell me the problem please? https://graeme.starnox.co.uk/cricket/index.html
Best wishes,
Graeme
1 Like
It comes up fine for me, at 768px width. Any change your CSS is cached and you need to re-load?
It’s appearing on the homepage, but not other pages.
Not had time to check it out properly though.
As far as I can see, you simply missed out the hamburger button code on the other pages.
Thank you so much for your help, I did think it could be the browser on my phone caching but I just kept re freshing & it was still the same, could you send me a screenshot please? How can I completley clear the cache on my phone? I haven’t been back to it yet as I need to add the menu to the other pages, thank you
I’m sure there’s a way to clear the cache on your phone, but as a temporary check you could add a query string onto your css stylesheet link, like href=“css/styles.css?123” and that will make the browser pick up the a new copy of the stylesheet. YOu could do that to the index.html page just from your browser, if you think maybe the html you’re seeing is an older cached one too.
Thank you so much for your help, I did think it could be the browser on my phone caching but I just kept re freshing & it was still the same, could you send me a screenshot please? How can I completley clear the cache on my phone? I haven’t been back to it yet as I need to add the menu to the other pages, thank you
Thank you Sir, I have the link how can I add what you suggested? The menu works on my son’e, sister’s and missus’s phones but not mine! I have a feeling it’s something to do with the width set in the @media (max-width: 480px) { but I’m not too sure what to set this to. When the menu works, it takes up the whole of the phone screen, however, all the links are there
Set it before the normal menu rund out of space.
In your desktop browser, drag the window edge in and out, see where the layout falls apart, and set the query at that width.
You can use “Responsive design mode” to see the viewport width in pixels as you move it.
I’m still seeing it missing on some pages, so you need to add the button to all your pages.
In that rule you place the navigation on top of everything absolutely and make it fill the whole screen so you can’t see anything else (even the hamburger that opened it).
If you want it as a full overlay then change that 480px rule to this:
@media only screen and (max-width: 480px) {
.navigation {
display: none;
flex-direction: column;
background-color: rgba(255, 255, 255, 0.9);
position: fixed;
inset: 0;
overflow: auto;
justify-content: center;
align-items: center;
z-index: 99;
padding: 3rem 0 0;
}
.navigation.active {
display: flex;
}
.navigation ul {
background: #fff;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.4);
padding: 10px;
}
.hamburger {
position: fixed;
top: 0;
left: 0;
width: auto;
height: auto;
margin: 0;
z-index: 100;
}
}
That will make it look roughly like this (ignore the css edit box of course):
Or if you want it to look like the 768px screen then remove that media query and the menu will be placed as in your larger tablet (<768px) screens
.
I tried re sizing the browser window until the normal menu disapreared but I’m not too sure what to do next, thank you
Thank you, I’m just trying the homepage out first
The menu, when dropped down covered all of the screen, it used to be smaller and you could see the page underneath
No at less than 480px you blocked out all the screen underneath with a solid white background so you could not see any of the rest of the page apart from the fixed positioned watermark. You also blocked out the hamburger so it could not be switched off once you clicked it on
In my example above I gave some transparency and centred the menu to allow the hamburger to show at the top so that you have a working menu. It is then up to you how you style it from there but it is working with the code I gave you.
Thank you so much for all your help with this Paul, do I replace your code from ```
@media only screen and (max-width: 480px) {
Hello again, I added the code and this is just how I wanted it
I resized my browser on my laptop to enable the Hamburger menu, for some reason it won’t display on my phone like this! I asked my family & friends to check it out & it’s fine!
It won’t display on your phone like that if your phone is less than 480px which most likely it will be. On a phone you will get the display as shown in my screenshot which is the smaller screen display.
If you want the tablet view to display on the same on a phone as well then just completely remove the 480px media query.
I’m not quite sure where you are wanting to go with this? 
The Hamburger menu it’self doesn’t show, only the normal menu
