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!
