Adjust CSS for Drop-Down menus

  • I’ve made a change to the CSS of the nav bar using custom code, and now my drop-down menus appear 15-20px below the nav bar itself. So far I’ve not managed to find the CSS that controls the positioning of the menu, as when using the FireFox extension FireBug, the CSS changes as soon as I move the mouse off the menu.

    The only change I’ve made is the addition of this code, which simply removes the top and bottom padding around the menu item.

    ul.sf-menu li a {
    padding: 0 25px 0 0;
    }

    Can anyone tell me what I need to change to fix this?

    I’d also like to remove the top and bottom padding from the menu items themselves, so a heads up on this would also be appreciated.

    The site if needed is:
    https://www.aoweb.co.uk

    Thanks in advance

    Andy
    [signature removed]

Viewing 1 replies (of 1 total)
  • Thread Starter iamandyogden

    (@iamandyogden)

    For anyone that has the same issue, I managed to find the CSS and resolve my positioning issue.

    The following code was used to remove the top and bottom padding, which then left a gap as described.

    ul.sf-menu li a {
    padding: 0 25px 0 0;
}

    The following additional code allows you to adjust the position of the floating menu, the figure provided being the height of the nav row itself. I took a screen capture and counted the row height in pixel

    .sf-menu li:hover ul {
    top: 18px;
}

    Hope this helps future readers

    Andy

Viewing 1 replies (of 1 total)
  • The topic ‘Adjust CSS for Drop-Down menus’ is closed to new replies.