Collapsible navigation does not work with margin - why? - html

Question

I use the following code to style my navigation: External codePen
/*--- Navigation Main ---*/
.nav {
margin: 0px;
background-color: rgb(200,216,239)
}
ul.topnav {
display: block;
list-style-type: none;
margin: 0 450px 0;
padding: 0;
overflow: hidden;
position: relative;
border-bottom: solid 1px
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
text-align: center;
padding: 1px 15px;
text-decoration: none;
height: 65px;
line-height: 70px;
}
ul.right {
margin: auto;
float: right;
list-style-type: none;
border-bottom: 1px
}
#club-name {
border-bottom: 1px firebrick;
}
/*--- Navbar colors ---*/
ul.topnav li a:hover:not(.active) {
background-color: rgb(144,149,158);
color: rgb(198, 218, 238);
}
ul.topnav li a:active:not(.active) {
background-color: rgb(46,53,66);
color: rgb(198, 218, 238);
}
ul.topnav li a.active {
background-color: firebrick;
}
/*--- Pseudoclasses ---*/
nav a:link {
color: rgb(144,149,158);
text-decoration: none;
}
a:visited {
color: rgb(144,149,158);
}
/*--- Small Screen view ---*/
#media (max-width: 600px){
nav {
margin: 0px;
}
ul.right,
ul.topnav li {
float: none;
text-align: center;
}
}
/*--- fonts ---*/
#club-name {
font-family: Bevan;
font-size: 20px;
color: aliceblue
}
ul.topnav ul.right li {
font-family: Pontano Sans;
font-size: 20px;
font-weight: bolder;
}
<div class="nav">
<ul class="topnav">
<li><a id="club-name" class="active" href="index.html">Hercules</a></li>
<ul class="topnav right">
<li>The Team</li>
<li>Facilities</li>
<li>Membership</li>
</ul>
</ul>
</div>
My styling works as I want until I set ul.topnav { margin: 0 350px 0; }.
If you update this margin to 0 and make the window smaller, you will see the effect I achieved before, but once I applied margins, the collapsible effect does not work anymore.
Hope someone can help, or offer me a different solution.

Answer 1

When you set the ul.topnav margin to 350px, the ul.topnav li elements start to run into each other and wrap before the breakpoint is reached as the screen size gets smaller. You can achieve an effect similar to the one you achieved before you applied the margins by setting the margins for ul.topnav to 0 auto, and then setting the max-width for this element to 800px or so. This provides some space on either side of the ul.topnav at larger screen sizes, ensures the ul.topnav li elements don't get too squished at smaller screen sizes, and allows your breakpoint to work as expected.
The CSS for ul.topnav in this solution looks like this:
ul.topnav {
display: block;
list-style-type: none;
margin: 0 auto;
max-width: 800px;
padding: 0;
overflow: hidden;
position: relative;
border-bottom: solid 1px
}