I adapted an existing page to a slightly different use.
In the oroginal page the normal navbar disappears and gives way to 2-line smaller navbar with the same content.
Now, I want something a bit different: when the originaL sidebar is taken at @800px I want the 2-liner to come in with one content; and then @550px to remain there but with a different content.
I assumed that all I had to do was to replicate the code of the 2-liner both in html and css and give them display:none; up to the point where they came on on the scene.
But, I lost the plot!
this is what I added to html and css and have since removed. What have I done wrong?
.small-nav2 {
margin:2px 0 0;
background:#cd945c;
padding:0;
list-style-type:none;
}
.small-nav2 li {
border-right:2px solid #fff;
display:inline-block;
}
.small-nav2 li:last-child {
border-right:0
}
.small-nav2 li a {
display:inline;
line-height:20px;
padding:0 4px 0;
text-decoration:none;
font-family: roboto, Helvetica, sans-serif;
font-size:14px;
color:#fff;
}
.small-nav2 a:hover {
color:#00f;
#horizontal2 {
display:none;
text-align:center;
}
<div id="horizontal2">
<ul class="small-nav2">
<li><a href="Barcelona.html"> Hotels</a></li>
<li><a href="airportBcn.html">Airport</a></li>
<li class="noborder"><a href="sightsBcn.html">Sightseeing</a></li>
</ul>
<!-- close nav0 -->
<ul class="small-nav2">
<li><a href="taxisBcn.html">Local transport</a></li>
<li><a href="SpainTipping.html">Tipping</a></li>
<li><a href="FoodBcn.html">Eating</a></li>
<li class="noborder"><a href="/">MAIN PAGE</a></li>
</ul>
<!-- close nav1 -->
I wonder also if it is possible to use the same 2-liner code with a switch of content… No, I guess not!