CSS problems – Spacing in topmenu and arrows

  • rsimonsen

    (@rsimonsen)


    11 years, 2 months ago

    I am having difficult customizing the css in the topmenu.

    1) How do I kill the spacing between the menu items? (It looks as if there are about 5px of spacing between each menu item.)

    2) How do I kill the dropdown arrows? (Also the one showing up when hovering the menu item.)

    Source:
    http://ifn.blansen.dk/

    Thanks. 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Jeremy Clark

    (@jeremyclark13)

    11 years, 2 months ago

    1) In the style.css you’ll need to change this.

    #dropdown, .top-menu{
font-size: 12px;
}

    to

    #dropdown, .top-menu{
font-size: 0;
}

    2) Again in style.css you’ll need to change this.

    .ribbon ul.top-menu > li.has_children, .square ul.top-menu > li.has_children, #dropdown > li.has_children {
background: url("images/top-submenu.gif") no-repeat scroll right center transparent;
    padding-right: 10px;
}

    to this

    .ribbon ul.top-menu > li.has_children, .square ul.top-menu > li.has_children, #dropdown > li.has_children {
background: none;
    padding-right: 0;
}

    this will remove the hover arrow

    .ribbon ul.top-menu > li.has_children:hover:after, .square ul.top-menu > li.has_children:hover:after, #dropdown > li.has_children:hover:after{
border: 0;

    Thread Starter rsimonsen

    (@rsimonsen)

    11 years, 2 months ago

    Hi Jeremy

    It worked perfectly in both IE and Firefox – thanks!!
    I still got problems with the spacing in Safari though… What to do?

    Theme Author Jeremy Clark

    (@jeremyclark13)

    11 years, 2 months ago

    Ok this solution should work for all the browsers.

    #dropdown, .top-menu{
font-size: 0;
}

    should be changed back to

    #dropdown, .top-menu{
font-size: 12px;
}

    then this added

    .ribbon ul.top-menu > li, .square ul.top-menu > li, #dropdown > li{
margin-right: -3px;
}

    Thread Starter rsimonsen

    (@rsimonsen)

    11 years, 2 months ago

    Sorry… That didn’t work. Instead now the spacing is on all three.
    Do you got another suggestion?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS problems – Spacing in topmenu and arrows’ is closed to new replies.