Archived topic
Top margin on sub-menu
7 replies · Started by Fabien on April 8, 2019
Hi,
I've added a top margin on my sub-menu (ul.sub-menu) and an arrow using the following CSS :
@media (min-width:769px) {
.main-navigation ul ul {
margin-top: 10px;
padding:10px;
border-radius: 5px;
filter: drop-shadow(0 0 13px rgba(0,0,0,0.3));
box-shadow: none;
}
.main-navigation ul ul:before {
background-color: transparent;
bottom: 100%;
left: 20%;
border: 13px solid transparent;
border-bottom-color: #fff;
content: " ";
height: 0;
width: 0;
position: absolute;
}
}However, my submenu is now hard to reach : https://cl.ly/b199cca20a90
Any idea on how to fix this ?
Thanks
Hi there,
Would something like this work for you?
https://generatepress.com/forums/topic/could-help-me-make-design-a-menu-such-as-this/#post-806729
Your site is locked with password so we can't actually see the issue.
Thanks Leo, I have the same issue with the code provided by Tom.
How can I share the login/password with you ?
You can provide login details via the Account Issue Form:
https://generatepress.com/contact/
Please add the URL of this Topic to the form so we can track.
Thanks David. Just filled the form. Let me know if you have any questions.
Hi there,
so we could try and delay the transition so the submenu stays visible but that would take some undoing of your current CSS. Instead lets try this:
.main-navigation .sub-menu:after {
content: '';
background-color: transparent;
display: block;
position: absolute;
left: 0;
right: 0;
top: -20px;
height: 20px;
}It adds a transparent psuedo element to fill in the gap. You may need to tweak the top and height properties but it should do the trick.
Awesome David, works like a charm !
Great to hear that :)
