Help me fix a small navigation CSS issue

Posted on 2011-10-23
Last Modified: 2012-05-12
Please advise what CSS to change/add in order to even the padding of the links in my navigation bar (notice it is uneven top & bottom):
Question by:TonyCabone
    LVL 13

    Expert Comment

    looks perfect to me (IE and Firefox)
    LVL 15

    Accepted Solution

    change the
    .menutop li
    #rt-menu a, #rt-menu a:hover, .menutop > .item, .menutop > .item:hover, .menu-type-splitmenu .menutop .item

    heights to 38px

    Author Comment

    Not if you measure the distance between the top of the nav bar & the links with the bottom of the nav bar & the links.

    i.e. see picture attached. I want an even gap on both the top & bottom of the text in the links. Padding on navigation uneven
    LVL 3

    Assisted Solution

    On line 21 in your fusionmenu.css I found this:
    .menutop li.root > .item span {
       display: block;
       margin: 0;
       outline: none;
       padding: 0 15px;
       width: auto;
       line-height: 3em;

    Open in new window

    Change line-height to 40px (the size your containers are) and your padding should look better.

    Author Comment

    I just overlooked that answer, thanks for amending the points & thank you Eyal.

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    Suggested Solutions

    A colleague recently asked me about how to give his client a small part of the web site that could be completely under the client's control.  Since I have done this sort of thing before to add emergency banners to a web site, I decided I would creat…
    First of all, we will need Jumi component or Sourcerer plugin for this to work. We need either of these because the main focus here is custom development outside of the standard modules or articles within Joomla. You can find Jumi's my …
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    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…

    746 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

    15 Experts available now in Live!

    Get 1:1 Help Now