Switching navbars in media queries

[qim]

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!

[qim]

@qim

.small-nav2 a:hover {
color:#00f;

Just looking at the post I notice a curly bracket missing…

Is this the problem? I may have to leave til morning, It’s late here.

Thanks

[Mittineague]

@qim

Is this the problem?

It will break the CSS and any further rules won’t be applied.

[qim]

RESOLVED

In fact, I just corrected it and all seems well.

Many thanks and sorry,