Archived topic
Can I add a customised pointer on my navigation?
7 replies · Started by Ema on March 28, 2021
Hello GP Team,
I'm having trouble finding a solution to this.
I'm making this website in Generate Press and GenerateBlocks (which I absolutely love!)
I'm wondering if it's possible to create the navigation menu I designed in XD.
I'd like that when the user hovers over a menu item, I'd like a small .svg leaf icon appear above the menu?
like my design here;
Any help/guidance at all is most appreciated
Ema
Hi there,
you can use some CSS like this:
@media(min-width: 769px) {
.main-navigation ul.menu>li>a {
position: relative;
}
.main-navigation ul.menu>li>a:before {
content: url('url_to_your_image');
position: absolute;
top: -20px;
left: 50%;
transform: translate3d(-50%, 0, 0);
opacity: 0;
}
.main-navigation ul.menu>li:hover>a:before,
.main-navigation ul.menu>li.current-menu-item a:before {
opacity: 1;
}
}2 things to note in the CSS:
content: url('url_to_your_image'); add the URL to the image you want to use... the image must be the exact size you want it displayed.
top: -20px; adjust the negative top value to the height of the image and a little more so it sits above the menu item.
Hi David,
Ahhh...
Wow, thank you so much for your reply, with detail and guidance, well over and above what I was expecting in terms of support. I've been looking for a solution for so long.
I'm going to implement this tomorrow and let you know how I did.
I'll pop a wee donation in the GP pot.
So appreciated.
Ema
You're welcome - and thanks for the filling the Coffee pot :) Much appreciated.
Let us know how you get on - happy to help!
Hi David,
Thank you so much for your help again - the site is still work in progress, but works like a dream!
See here
Loving using just Generate Blocks and GP!
Best wishes Ema
Wow - love the look of that design - really great to see what people are doing with GP + GB...
Glad to be of help!
Thanks David!
You helped so much !
So appreciated
Best Ema
Happy to be of help
