Results 1 to 5 of 5

Thread: Help with menu

  1. #1
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default 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.
    Last edited by dmwhipp; 12-29-2017 at 07:14 PM.
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  2. #2
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    466
    Thanks
    0
    Thanked 60 Times in 56 Posts

    Default

    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>

  3. #3
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default

    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
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    493
    Thanks
    9
    Thanked 53 Times in 51 Posts

    Default

    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
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  5. The Following User Says Thank You to Deadweight For This Useful Post:

    dmwhipp (12-30-2017)

  6. #5
    Join Date
    Sep 2004
    Location
    Tallahassee, FL USA
    Posts
    264
    Thanks
    71
    Thanked 2 Times in 2 Posts

    Default

    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
    Deborah Whipp
    Web Designer
    Tallahassee, FL
    www.DWWebDesigns.com

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •