[Support request] Top margin on sub-menu

[Fabien]

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

[Leo]

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.

[Fabien]

Thanks Leo, I have the same issue with the code provided by Tom.

How can I share the login/password with you ?

[David]

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.

[Fabien]

Thanks David. Just filled the form. Let me know if you have any questions.

[David]

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.

[Fabien]

Awesome David, works like a charm !

[David]

Great to hear that 🙂

[Author]

Posts