-
Help with menu
Hello,
I am trying to make it so that the top menu item to the far right that reads “Reservation” is different color (#150d67) as default for all media queries on the following page: http://www.alaprovence.com/slideshow.html
Here is the page code:
<div class="top-nav s-12 l-10">
<ul class="chevron">
<li><a>Home</a></li>
<li><a>About Us</a>
<ul>
<li><a href="/about.html">Our Restaurant</a></li>
<li><a href="/press.html">Press</a></li>
</ul>
</li>
<li><a>Menus</a>
<ul>
<li><a>Lunch</a></li>
<li><a>Dinner</a></li>
<li><a>Dessert</a></li>
</ul>
</li>
<li><a href="/gallery.html">Gallery</a></li>
<li><a href="/location.html">Location</a></li>
<li><a href="/contact.html">Contact Us</a></li>
<li class="hide-l"><a>Reservations</a></li>
</ul>
</div>
<div class="reservation">
<div class="top-nav s-12 l-2">
<ul>
<li class="hide-s hide-m"><a>Reservations</a></li>
</ul>
</div>
</div>
</nav>
</div>
For the stylesheet, I’ve tried variations of: .reservation .top-nav li { background:#150d67; } and that's working for the full size version of the site, but I cannot get that menu item to default to blue on the responsive menu.
Any help would be appreciated.
-
Try inline styling of the menu item like this:
Code:
<li class="hide-s hide-m" style="background-color:#150d67 !important;"><a>Reservations</a></li>
or this:
Code:
<div class="top-nav s-12 l-2" style="background-color:#150d67 !important;">
<ul>
<li class="hide-s hide-m"><a>Reservations</a></li>
</ul>
</div>
or even this
Code:
<div class="reservation" style="background-color:#150d67 !important;">
<div class="top-nav s-12 l-2">
<ul>
<li class="hide-s hide-m"><a>Reservations</a></li>
</ul>
</div>
</div>
-
I've tried inline styling, but it only worked for the full-width version of the site. I need the Reservations tab to stay blue in the responsive version with the hamburger menu, but I still haven't figured that out yet: http://www.alaprovence.com/slideshow.html
-
You have
Code:
@media screen and (max-width: 768px)
slideshowcss.css:236
.top-nav li a {
background: none repeat scroll 0 0 #2e3331;
Remove that. It is in your slideshowcss.css
-
Thank you so much! I've tried to strip out pieces of the CSS that came with the MyResponsee templates that aren't needed, but still have a lot to figure out with responsive coding.
Again, many thanks!
Deborah
