New Topic/Question
Reply
Basically I am using a traditional means of creating a horizontal navigation bar which consists of:
<!-- HTML -->
<ul class="navigation">
<li>
<a href="#">Monday</a>
</li>
<li>
<a href="#">Tuesday</a>
</li>
<li>
<a href="#">Wednesday</a>
</li>
<li>
<a href="#">Thursday</a>
</li>
<li>
<a href="#">Friday</a>
</li>
</ul>
/* CSS */
ul {
list-style-type: none;
margin: 2em 0;
}
.navigation {
padding:0;
text-align: center;
}
.navigation li {
display: inline;
}
.navigation li a {
background-color: #4CAF50;
border: none;
border-radius: .5em;
color: #fffff0;
padding: 1em 2em;
text-align: center;
text-decoration: none;
}
.navigation li a:hover {
background-color: #fac943;
color: #880085;
text-decoration: underline;
}
Typically I'd use CSS3's flexbox but I am wanting to go the traditional route for older browsers.
Right now I have the <body>'s max-width to 50% and margin set to auto and using a media query for when the max-width is 1120px and then changing the max-width to 75% and also when the max-width is 740px I change the max-width to 100% and the margin to 0. The reason I do this is for the <li> elements to stay inline and not start to overflow, however I find that this solution is not very good. It works on some screens but not all...
I'm using JQuery to toggle the visibility of some other <ul> elements so my thought is to just display the navigation <ul> to display vertically when it starts to overflow, so is there an event for when the overflow starts to occur?
MultiQuote
| 