How should I create a top menu that is mobile-first and responsive?
Can I still use a UL and LI’s?
Should I also use NAV?
Or is there a more modern way to do things?
I assume you have actually tried the items mentioned?
Upload your web page to your server and validate using the following free online tools:
https://jigsaw.w3.org/css-validator/
https://search.google.com/test/mobile-friendly
If your script does not give the desired results then please either supply a link to your site or create a free CodePen detailing your problems.
The question was, “Where do I begin?!”
W3C validation is premature…
I asked where to begin, AND I aksed if using an Unordered List is still applicable?
Like in the past, I am torn between taking off 3-6 months and reading every SitePoint books out there, versus trying to stumble through things in an effort to get a mobile product out there ASAP.
I’ve come to realize that most of what I know how to do with HTML/CSS is obsolete, but I don’t have years to become a master like @Ray.H or @PaulOB.
On a side-note…
I bought some books from SitePoint maybe 3 years ago when they offered PDF versions, and I wonder if any of those books are still any good, or if I should throw them away?
Instead of trying to “re-invent the wheel”… try surfing the myriad of web pages that have a “top menu” that you like. Copy the source to your local computer, tweak and validate with the links supplied.
As far as the SP books and PDFs are concerned then without more specific details then the question cannot be answered.
The very first web page still renders perfectly:
Hi there UpstateLeafPeeper,
here is a basic example…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Basic menu</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.62em sans-serif;
}
ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
}
ul li {
margin: 0.5em;
}
ul a {
display: block;
padding: 0.25em 0.5em;
}
</style>
</head>
<body>
<ul>
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="news.html">News</a>
</li>
<li>
<a href="sport.html">Sport</a>
</li>
<li>
<a href="weather.html">Weather</a>
</li>
<li>
<a href="iplayer.html">IPlayer</a>
</li>
<li>
<a href="sounds.html">Sounds</a>
</li>
<li>
<a href="cbbc.html">CBBC</a>
</li>
</ul>
</body>
</html>coothead
2 Likes
Thanks, as always, for the code sample.
I had something similar in my code samples, but it appears that my code was missing one crucial line…
ul {
display: flex;
justify-content: center;
flex-wrap: wrap; /* HERE */
padding: 0;
margin: 0;
list-style: none;
}
</style>So that makes my sample wrap even down to a phone that is 100px wide!
And I guess that answers my question of, “Can I still use a UL and LI’s?” (Assuming @coothead is coorect.) 
BTW, why do you put display: block on the anchor?
Sorry about that, it was just a force of habit. 
It is not actually required and can safely be removed.
coothead
I seem to recall reading something online from many years ago that maybe said making anchor a block item makes them more “clickable” since it makes the target area of the link larger?
Maybe?
Back to my OP…
Okay, so that one missing line of code (i.e. flex-wrap: wrap; ) seems to have sorta fixed the problem I was having on mobile, but now I have a new problem…
If I take my updated responsive top menu and change the screen width to 100px, I get a vertical stack as a menu.
Obviously this isn’t desirable.
So what do you do them?
Also, if you have a top menu with long word choices (e.g. “Painting Supplies”, “Organic Foods”, “English Literature”) then that also messes up things on mobile.
So do I need a “hamburger menu” for smaller screens?
(I think those are deemed “bad”?)
Whatever I do, it must only use HTML and CSS.
I am worried that creating truly responsive top menus is actually a rather large topic… 
Hi there UpstateLeafPeeper,
Well you can experiment with @media().
Here is a basic example…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Basic menu</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.62em sans-serif;
}
ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
}
ul li {
margin: 0.5em;
}
ul a {
display: block;
padding: 0.25em 0.5em;
}
@media ( max-width: 33em ) {
ul {
flex-direction: column;
}
}
</style>
</head>
<body>
<ul>
<li>
<a href="painting-supplies.html">Painting Supplies</a>
</li>
<li>
<a href="organic-foods.html">Organic Foods</a>
</li>
<li>
<a href="english-literature.html">English Literature</a>
</li>
</ul>
</body>
</html>Further reading:-
A comprehensive guide to CSS flexbox layout
coothead
I recall being able to switch between row and column layouts using Flexbox, but that doesn’t address my concern.
If you were on mobile, would you want to be greeted with a stack of “blocks” when you arrive on a home page?
(Maybe that is what people expect, but not me.)
What about “hamburger menus”?
They seem to be a good chocie to me, but from the little I have read, they are hated by many. Not sure why?
It would be nice for people to chime in on the pros and cons of creating top menus when the screen gets really small like on an iPhone 5.
I am the wrong person to answer that question,
as I would rather be dead than be on a mobile. 
Nevertheless, here is a basic example…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Basic menu</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.62em sans-serif;
}
#hamburger {
position: absolute;
left: -999em;
}
#hamburger-icon {
display: none;
cursor: pointer;
}
#hamburger-icon::before{
display: inline-block;
content:'\02261';
font-size: 2em;
transition: 0.5s ease-in-out;
}
nav {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
flex: 1;
padding: 0;
margin: 0;
list-style: none;
}
ul li {
margin: 0.5em;
}
ul a {
display: block;
padding: 0.25em 0.5em;
color: #000;
text-decoration: none;
background-color: #fff;
}
@media ( max-width: 33em ) {
#hamburger:checked ~ nav > ul {
height:auto;
}
#hamburger:checked ~ nav #hamburger-icon::before{
transform: rotate( -90deg );
}
#hamburger-icon {
display: block;
}
ul {
height:0;
overflow: hidden;
flex-direction: column;
}
ul li {
margin: 0 0 0.25em;
}
}
</style>
</head>
<body>
<input type="checkbox" id="hamburger">
<nav>
<ul>
<li>
<a href="painting-supplies.html">Painting Supplies</a>
</li>
<li>
<a href="organic-foods.html">Organic Foods</a>
</li>
<li>
<a href="english-literature.html">English Literature</a>
</li>
</ul>
<label id="hamburger-icon" for="hamburger"></label>
</nav>
</body>
</html>For a very quick view go here…
https://codepen.io/coothead/full/NWRYzbm
coothead
1 Like
For most of my life I felt the same way, but alas, the world has changed and iis leaving old cootheads behind…
That is a very cool example you posted!
Does it work entirely using HTML/CSS? (I didn’t see any Javascript mentioned, but it’s hard to believe you can do that with HTML/CSS alone?!)
That is very true, but for me, with 80 on the near
horizon, I can see no good reason to take on board
all the modern innovations that are available to the
world.
At the top of that list is the so called “Smart phone”. 
I’ve always considered “Smart” to be an advertising
word that has been freely used to separate the
unwary from their hard earned cash.
Yup, you got what you specified. 
coothead
2 Likes
More power to you.
Unfortunately I went to the “dark side” in the last year or so…
Amen to that!! 
It is amazing what you can do with CSS these days?!
I cannot keep abreast of all of it’s additions. 
This link…
…will make you head spin. 
Our resident CSS guru @PaulOB, though, is
probably aware of them all.
coothead
1 Like
I bookmarked MDN last year and try to refer to it any time I am tinkering again with HMTL and CSS.
For a starting point I would look at the Bootstrap 4 examples - you get a template and can have a basic responsive page with top navbar up and running in minutes
https://getbootstrap.com/
Here’s a basic one - all the code is on their site
https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/
and yes they use UL an LI and nav
Hi there kerry14,
it seems that you have may have missed this stipulation…
…as the example in your link relies upon javascript.
He may correct me If I am wrong but I believe that
@UpstateLeafPeeper has also expressed a reluctance
to use “BootStrap”.
coothead
1 Like
Sorry, my bad, just trying to help 
but maybe he could Consider that as an easy option as you don’t really need to know anything about JavaScript and I don’t know what the objection to Bootstrap is. But hey, I take your point - apologies.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.