[Resolved] Submenu arrows

[Krzysztof]

I have problem with submenu arrows after update Generatepress from version 1.2.9.2 to 1.2.9.3.

Old look:

New look:

I have custom walkter. How now change arrows position? 🙁

[Tom]

Hmm, the arrows shouldn’t have changed position, they’re just being added using CSS instead of javascript to avoid the jump on load.

Try clearing your browser cache and any caching plugins you may have.

[Krzysztof]

And the difference in code:

[Krzysztof]

It’s no cache problem.

[Tom]

Hmm, what’s the reason for the custom walker? I would need to see the website and inspect the code/compare it to what it should be to see what’s going on.

It’s about 1AM here right now and about to get to bed, so I’m not as helpful as I could be, but if you’d like to email me your URL I’ll take a look first thing in the morning and will find a fix for you.

For now, perhaps try removing the arrow with CSS to avoid the overlapping.

Sorry for the inconvenience!

[Krzysztof]

I sent the mail to You 😉 Goodnight.

[Tom]

Hmm, how did you make it so the sub menu only opens when you hover over the arrow?

Try this:

.sf-menu .menu-item-has-children > a:first-child, .sf-menu .page-item-has-children > a:first-child {
     padding-right: 2.5em !important;
}

[Krzysztof]

It’s doesn’t work 🙁 I back to previous Generatepress version – check my page again, You will now see how I did it.

[Tom]

Hmm, I’m not seeing an easy fix here – I’m actually having a tough time seeing how you accomplished this! I’m on a mini vacation over in Vancouver on a laptop, I’m spoiled at home with multiple monitors and all my development tools! Hard to debug on this thing.

Since you created a custom menu, how about removing the default arrow (hide it using CSS), then add your own arrow inside your custom walker (you can use the Font Awesome caret down icon). Let me know 🙂

[Krzysztof]

I tried to add custom CSS but is too difficult for me (other errors appeared – I give up and stay with older GP version).

[Tom]

Ok – I’ll keep this open and we’ll find a fix when I’m back at my own computer.

Sorry for the inconvenience!

[Krzysztof]

Could You help me now? 🙂

[Tom]

Yes! 🙂

Can you email me with everything I may need? (link to your website etc..).

Thanks!

[Tom]

Ok here we go – sorry for the delay!

.sf-menu .menu-item-has-children > a:first-child::after, .sf-menu .page-item-has-children > a:first-child::after {
	border: medium none !important;
	display: none !important;
}

.sf-menu .menu-item-submenu > a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -.5em;
	margin-top: -3px;
	height: 0;
	width: 0;
	border: 5px solid transparent;
	border-top-color: inherit;
	margin-top: -5px;
	border-color: transparent;
	border-left-color: inherit; 
}

May need some tweaking, but it’s a start 🙂

[Krzysztof]

It works amazingly! Thank You very much 🙂 Now I know what changes should be made to have a look what I want.

[Author]

Posts