Skip navigation
MoniLifecom
MoniLifecom
Currently Being Moderated

Customizing Spry Menu - Drop items different from tabs at the top

Feb 9, 2013 2:09 PM

How can I remove the background image from the dropped down items on a Horizontal Spry Menu while keeping the image for the tabs at the top? It seems every time I change something for the top tabs, the change is carried to the drop down menus as well.

 

Here is a link:

 

http://www.monicagraphicdesign.com/Bill/spiritual.html

 

You can see what is happening if you hover over "About Bill"

450 Views   7 Replies   Latest reply: MoniLifecom, Feb 10, 2013 3:57 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Feb 9, 2013 2:18 PM   in reply to MoniLifecom
    Report

    Open your SpryMenu.css file.  Scroll down a ways to this:

     

    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */

    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible

    {

        left: auto;

        background-color: #000;

        background-image: none;

    }

    /* Menu item containers are same fixed width as parent */

    ul.MenuBarHorizontal ul li

    {

        background:none;

        width: 8.2em;

    }

     

     

     

    Nancy O.

     
    |
    Mark as:
  • MoniLifecom
    Currently Being Moderated
    2. MoniLifecom,
    Feb 9, 2013 2:27 PM   in reply to Nancy O.
    Report

    Thank you Nancy O. This removed the background image.

     

    Would you please let me know how to make the text smaller for the dropped down menu? (compared to the text on the top tabs)

     

    Thanks

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Feb 9, 2013 2:29 PM   in reply to MoniLifecom
    Report

    Add a font-size property to that same selector.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • MoniLifecom
    Currently Being Moderated
    4. MoniLifecom,
    Feb 9, 2013 7:37 PM   in reply to Nancy O.
    Report

    Nancy, I had added the font size but it wouldn't show. I went to:

    ul.MenuBarHorizontal a

     

    and changed font size to: "inherit" and then it worked.

     
    |
    Mark as:
  • MoniLifecom
    Currently Being Moderated
    5. MoniLifecom,
    Feb 9, 2013 7:53 PM   in reply to MoniLifecom
    Report

    This is such a steep learning curve for me.

     

    One more question: On the hover, how can I have the color of the dropped down items' background change, but not the color of the tabs on top?

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    6. Nancy O.,
    Feb 10, 2013 10:20 AM   in reply to MoniLifecom
    Report

    You need a separate rule for that.  Add this to line 126 of your Spry CSS code.

     

    ul.MenuBarHorizontal li li a:hover, ul.MenuBarHorizontal li li a:focus {

      background:#000; /**change color as req'd**/

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • MoniLifecom
    Currently Being Moderated
    7. MoniLifecom,
    Feb 10, 2013 3:57 PM   in reply to Nancy O.
    Report

    Thank you s much! I couldn't have done it without your help. I really appreciate that you took the time to help me out.

     

    The menu looks and works great!

     

    http://www.monicagraphicdesign.com/Bill/spiritual.html

     

    Moni

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points