I’m trying to develop a simple Hamburger application using CSS Details & Summary.
The Hamburger icon renders OK when tried on numerous desktop browsers and an Android telephone but does not display using the Apple iPad?
https://this-is-a-test-to-see-if-it-works.anetizer.com/sp-a/jb-hamburger/jb-hamburger.php
Also is it possible to click outside of the drop down menu, using CSS to close the drop down? If not then what JavaScript function should I investigate?
The hamburger appears in the blue menu at the top on my iphone which will be the same ios as the ipad. Note that some ipads are wider than your max-width so will display the normal menu. I believe the ipad air is 820px so won’t be triggered by your max-width 810px media query.
In ios and Safari the marker will still be present though as I think you still need the prefix to remove it.
details summary::-webkit-details-marker {
display:none;
}
It is possible but a bit convoluted. Essentially you would need to make the summary cover the whole page and then adjust stacking orders so that only anchors are clickable.
In your current page that would be accomplished like this:
header details[open] summary:before {
content: "";
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 99;
opacity: 0;
}
#SHOW-WHEN-NARROW {
z-index: 100;
pointer-events: none;
}
#SHOW-WHEN-NARROW nav a {
pointer-events: auto;
}
You would need to detect a click on the body element and if it’s not a link or some active content then you would remove the ‘open’ attribute from the relevant details element. That would be a question better posed in the JS forum 
Hi @PaulOB,
Hopefully I’ve cracked the missing Hamburger which I would be grateful if you could check.
I’ve introduced a Hotdog that manages to flip into a Hamburger depending on the viewport width.
Do you like the table of CSS variables that shows every possible background and foreground combinations for the six CSS colours?
I also managed to introduce a Hamburger “Close” button without using JavaScript which I find much better.
I would be grateful for any comments especially improvements.
The three source files are all available by selecting the the relevant CSS Display/Summary and the menu currently only selects “./incs/home.php” unless additional content pages are created.
I’ve just tested the original link from Post #1 on my iPad and noticed the incorrect page is being called most probably due to the web page being cached 
The latest webpage can be called from the following link:
https://this-is-a-test-to-see-if-it-works.anetizer.com/sp-a/jb-hamburger/ver-001/index.php
The min-width media query needs to be at 821px not 820px otherwise the ipad doesn’t get the hamburger because it is 820px…
Change this to 821px:
/* ======= HOTDOG START 810x1080 ======== */
@media only screen and (min-width: 820px) {
header {
background-color: var(--clr3, GREEN);
}
#HAMBURGER {
display: none;
}
etc....
}
No that is actually Javascript and reloads the page which I don’t think is a good idea.
onclick="location.href='?'"
Here’s an easy way without using JS or anything else and doesn;t reload the page either.
The Close button is absolutely placed at the bottom of the menu from inside the summary element so it still acts as a trigger to close. It’s a bit magic numberish but is fine for one word or one button like this.
Many thanks for the detailed information,
I hope to try incorporating your suggestions tomorrow and report back.
Just for fun here’s a more complex version (still no JS) that also creates a click outside the menu and with a fade effect on the rest of the body.
Or added to my sunset demo
I tried in vain to incorporate the revised Close button, gave up and found another Hamburger Menu without using JavaScript.
There is now only one Nav item and I have split the Hamburger CSS to make it easier for me to understand. The CSS was not easy for me to follow and I had a great deal of trouble trying to establish between the default Mobile first and wide Hotdog version because the CSS shared the same Nav and UL items
Eventually managed to modify to my requirements: Ver-003
The above was adapted from the following CodePen:
Enough for today and hopefully continue tomorrow with getting the Hamburger Menu to center both vertically and horizontally.
Yes that uses the checkbox hack and is not very semantic (although everyone uses it).
It also uses an empty element for the backdrop unlike my example which uses the :after pseudo element is much much cleaner html and css but of course the details element isn’t fully supported everywhere either.
Also this seems weird to me:
@supports (position: fixed) {
More browsers support position:fixed than support @supports so I don’t know what that is all about. Indeed less mobile browsers (old ios and android) support the adjacent sibling selector which the checkbox hack is based on which makes the above rule a bit strange.
However if it suits your purpose then I guess its ok as modern browsers will be ok with it.
I think something went wrong as I am seeing this:
It worked fine using Firefox but unfortunately failed using opera, etc I traced the problem to the following:
file: style-hamburger.css
.main-menu ul {
width: 7rem; /* ESSENTIAL FOR Opera */
columns: 7rem 1; /* Works as expected in FireFox */
I also noticed that all the CodePen examples do not show the the full width menu but only show the Hamburger menu? As mentioned I had problems trying to incorporate the CodePen versions into my examples.
I think the best idea is to start with one of your CodePen examples and gradually add my script because trying to add the CodePen script to my examples creted insurmountable problems for me
I'm going right off CSS and becoming more despondent since small tweaks appear to easily break the layout, Perhaps time the CSS was redesigned from scratch instead of the abundance of conflicting tweaks
I know you know this and are just letting off steam but everything has rules and they need to be learned. Imagine I started messing around with your PHP files (about which I know little) and then complaining things don’t work
It’s frustrating when things don’t work but CSS is often hard for programmers to understand because they approach it in the same was as they do with other languages where they want to control every minute detail but that doesn’t work for a web page that has no set boundaries. You have to think in a completely different way.
CSS will do (almost) everything you want but you have to approach it in the right way and you have a good grasp of the language. No one said it was supposed to be easy but most of the time it is simple (easy and simple don’t mean the same thing).
However Grid and flexbox can be extremely complex because they can do so many different things and can take months to learn the basics just as it would take me months to learn the fundamentals of php or any other language. I’ve been dabbling with JS for years but I’m still very much at a beginner stage.
Maybe if you showed me the actual html you want to use and the effect you want to create I could point you in the right direction to create the layout you want.
I see your page is mostly working now except that the backdrop doesn’t disappear when you open the screen wider from small.
Why do you even have columns defined there?
It’s only one column and that’s what it will be by default. You don’t need any column rules as you are not going from multiple columns down to one. I don’t see any use for the css column property in your menu at all.
This is part and parcel of learning css and you need to have skill in deciding what is the best way to accomplish what you want. Sometimes there are multiple approaches because css is so flexible but along with that comes the danger of using something that isn’t really right for the job in hand. In the end it comes down to experience and practice. If you want to get good at anything you need to keep up the practice. This is where I fail at JS because I only mess around with it from time to time and then I’ve forgotten what I already knew Sometimes knowing what you don’t know is as important as knowing what you do know:)
Regret the delay in replying which was mostly due to Server Operating System updates failing and not being able to find satisfactory solutions… so I have had to resort to backups
Many thanks @paulOB for your insightful comments which I do appreciate immensily although I still stand by my comment about “Perhaps time the CSS was redesigned from scratch” due to the following reasons:
I get the general impression that CSS could be drastically improved if they introduced another CSS Strict Version instead of being forgiving by making a best guess at the designer’s requiremnts… especially when features are ignored rather than highlighted (which may help prevent the designer from continually making the same mistake).
After starting with Tandy Basic I dabbled in numerous compiled languages which usually stopped on errors and usually had options to hide warnings. Activating warnings was a steep but informative learning curve but highly recommended.
Web design necessitated using PHP and MySql the former is not compiled but does have useful a error reporting facility that also halts on errors and displays warnings.
Unfortunately HTML and CSS do not appear to have the same validation restrictions I’ve searched and only found the following:
<meta error_reporting="DISPLAY_ALL_ERRORS">then it should highlight the following error in your CodePen
> Property boder doesn't exist. The closest matching property name is border : 1px solid black
The powers to be at w3.org seem to delight in introducing new features and not improving the basic functionality,
I was hoping to create a standalone header/menu script that I could replace in existing web pages.
The initial attempt was Hamburger-Ver-001
I was using FireFox and columns worked as expected and failed miserably using Opera.
CSS has too many options and conflicting “Searched Solutions” which render satisfactorily only if identical Operating Systems and Browsers are used. Instead of adding more features then create a simple version with error reporting would be make me a happy bunny 
LOL@ The words ‘Paul’ and ‘Beginner’ in the same sentence! Thanks for a smile Paul! 
I was reading your thread John and thinking He owns a restaurant? That’s interesting. But – why not? before Googling that ‘Hamburger’ in this instance is referring to the 3-Bar Menu element in the upper corner of most sites that offer extensive User Options! 
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.