Customizing a horizontal Spry Menubar

Posted on 2011-10-31
Last Modified: 2012-08-13
I am new to Spry Menubar technology.  I'm trying a horizontal Spry Menubar at   When the browser window is narrowed, especially with lower screen resolutions, the menu item text is truncated, or spills outside the menu container.  I would like to avoid that, while maintaining a font size which is legible across most common screen resolutions.  SpryMenuBar.css
Question by:ddantes
    LVL 16

    Accepted Solution

    Add: min-width:720px;
    To: ul.MenuBarHorizontal {

    I think It would benefit your business if you buy template for you site ($50 max) and just fill it with content you already have because current state of website, makes visitors think that it dead as it wasn't updated to new standards. Also "Copyright © 2000 David Dantes." proves it.

    Author Comment

    Thank you for your comments.  The min-width worked.  I am planning to update my website, but I think each page may need its own css because the information doesn't lend itself to a uniform layout.  Aside from the antiquated tables and borders, may I ask if there is anything else you feel needs updating?
    LVL 16

    Expert Comment

    Firstly, you are wrong that you need different style sheets for each page because it's difficult to maintain and you don't want users to feel that they moved to another website, do you?
    so you need:
    1. style for header (menu included and should be same and equal on each page);
    2. style for content box;
    3. style for footer;
    0. style for wrap;
    4. style for each content (which should be different for each page, but it isn't much to make different CSS file for each page)

    I feel you need to update everything, you don't even money to make you website 300% better.
    Why update everything?
    Because it's hard to read all this bold text with allot of white uneven spaces and random pictures.
    You have nice pictures and text but you need to structure it nicely.

    Author Comment

    Thank you for your specific suggestions.  I am interested in implementing this. Can you recommend a site where appropriate templates are available?

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now