Archived topic
Making list item in menu behave as a button
4 replies · Started by Lars on June 20, 2022
Hi (Appreciate you guys, best support ever.)
Over at https://nordfro.webease.net a lot is cooking. Now I am trying to make a list item in the menu behave the same way as a block button that have I put there through Elements. The reason is because I want a sub menu to show when hovering over the button, so instead of using a button I thought that I could make the list item behave as one. You'll see the result in the link.
Simpler way to put it: How can I make the menu alternative list item "Köp fröer" behave and look exactly the way the button "Köp fröer" does?
Thank you
Lars
Hi there,
try this CSS for your shop-button menu item:
.main-navigation .main-nav ul li.shop-button a {
line-height: 1.9em;
background-color: #8AE33B;
color: #ffffff;
padding: 5px 10px 0;
border-radius: 5px;
margin-right: 10px;
margin-bottom: 5px;
}Thanks David
How do I not change the children (submenu) of this link? Is there a child:not-orsomething that could work here?
You can change this selector .main-navigation .main-nav ul li.shop-button a to .main-navigation .main-nav ul li.shop-button> a
Great!
I also learnt that adding div:not(.slideout-navigation) helped me not applying the changes to the off canvas panel.
