Border and spaces in submenu – CSS not efficient

  • Resolved helenes13

    (@helenes13)


    5 years, 6 months ago

    Hello
    3 problems remain in my menu. I have found dozens of similar item throughout the web, but haven’t been able to get one working and need more help.

    1/ Although I have found a CSS solution to remove the white background under the 2nd and 3rd level submenus, a thin grey border remains (when hover on “Gallery”).
    How can I remove it ? border-color : transparent or none don’t work.

    2/ I want to pull up the sub menus closer to the main menu. The different solutions I found did not work.

    3/ The line spacing is too big. The line-heigh property shows no effect to bring the items closer from each other. Don’t know what to do.

    Do you see solutions for those three problems ?
    Thanks in advance

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • George Appiah

    (@gappiah)

    5 years, 6 months ago

    Hello You Wonderful You,

    1/ Although I have found a CSS solution to remove the white background under the 2nd and 3rd level submenus, a thin grey border remains (when hover on “Gallery”).
    How can I remove it ? border-color : transparent or none don’t work.

    There seems to be a box-shadow that’s giving this outline. Try:

    .main-nav .menu>li .sub-menu-dropdown {
box-shadow: none;
}

    2/ I want to pull up the sub menus closer to the main menu. The different solutions I found did not work.

    This space seems to be coming from the fixed height of 100px defined on the top-menu links. So it is this height that you need to reduce. Try this, but feel free to change the values as desired:

    .main-nav .menu > li > a {
height: 20px;
line-height: 20px;
}

    3/ The line spacing is too big. The line-heigh property shows no effect to bring the items closer from each other. Don’t know what to do.

    This spacing seems to be coming from the top and bottom paddings of 11px defined for each of the sub-menu links. Changing line-height will have no effect. Try this, but feel free to change the numbers as desired.

    .basel-navigation .menu>li.menu-item-design-default ul li a {
padding-top: 5px;
padding-bottom: 5px;
}

    Border and spaces in submenu – CSS not efficient

    What appears to be an empty space on a page can be caused by a margin, padding, line-height, border, unused fixed width/height, image, white/transparent, etc. Without knowing EXACTLY what is causing this empty space, and where EXACTLY they are occurring in the HTML document (ie what classes/IDs), no random code you find on the Internet is going to help you.

    I’ll really advise that you learn to use your browser’s developer tools so you can accurately HTML, CSS and even JavaScript issues on your website.

    Good lick!

    Thread Starter helenes13

    (@helenes13)

    5 years, 6 months ago

    Dear George
    You have been very helpful.

    1/ the “border-shadow” property was the good one. I have added it to the CSS about sub-menu + sub-sub-menu.

    2/Height and line-height property work fine once added to the CSS about main-menu (and not sub-menu which I tried before).

    3/Now that 2/ is OK, 3/ doesnot need any change.

    Thank you so much !

    Good LUCK to you ! (hum, check your spelling, this could be misinterpreted).

    • This reply was modified 5 years, 6 months ago by helenes13.
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Border and spaces in submenu – CSS not efficient’ is closed to new replies.