-
AuthorPosts
-
January 19, 2021 at 9:06 pm #1273833
Hi Guys,
I hope you’re all doing well at these times. I would need help regarding configuration of main menu.
For our site we are using General Layout setting “Left sidebar” to display logo + menu on the left side. The challenge we have right now is that we need this left side menu with submenu-items (2nd + 3rd Level) and we would like to have a functionality similar to Stripe Docs where you have an arrow before each menu item and if you click on it all corresponding sub-menu items are shown up directly below the parent item& if you click again on the arrow sub-menu items will disappear.
Would be great to get a solution for this.
Thanks
FrankJanuary 21, 2021 at 7:17 am #1274300Hey Frank,
Thank you for the inquiry.
The main menu looks almost exactly like the stripe docs menu when we checked the site, aside from the arrow position. Do you need additional help with this?
Best regards,
IsmaelJanuary 21, 2021 at 9:44 am #1274307Well on default there are no arrows – aren’t they. – and it is no toggler – it reacts on hover – not on click.
You can have an arrow on those who have a submenu. f.e.:#avia-menu .menu-item.dropdown_ul_available:before{ position: absolute; top: 12px; left: -15px; content: "\e883"; font: 20px/1 entypo-fontello; speak: never; display: block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; z-index: 1; transition: all 0.7s ease; } #avia-menu .sub-menu .menu-item-has-children:before{ position: absolute; top: 12px; right: 10px; content: "\e883"; font: 20px/1 entypo-fontello; speak: never; display: block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; z-index: 1; transition: all 0.7s ease; } #avia-menu li.menu-item.dropdown_ul_available:hover:before{ transform: rotate(-90deg); color: red !important; transition: all 0.7s ease; } #avia-menu .sub-menu .menu-item-has-children:hover:before{ transform: rotate(-90deg); color: red !important; transition: all 0.7s ease; }
see:
January 21, 2021 at 6:39 pm #1274498Hi Ismael, hi Guenni,
Thanks a lot for your support. In the meantime i have installed a WP plugin “Iks Menu” which helps me a lot with the accordion menu. I only need to change the arrow position to the left.
Best
FrankJanuary 21, 2021 at 10:15 pm #1274532What number did you use for your layout?
https://iks-menu.ru/previews/on most of those previews : they work with flex model.
If you gave to the first flex-item an order number 2 they change position:.iksm-terms .iksm-term__link { order: 2; }
to bring the parents in line with the items with children you can do that:
.iksm-term:not(.iksm-term--has-children) { margin-left: 40px; }
or style the menu 5 to your needs ( different arrows, and background)
January 22, 2021 at 1:51 pm #1274706Hi Guenni,
Not sure where I can see which skin is currently active. I simply installed the plugin and used the active one. However, your CSS solved my issues with the arrows and position of the parent elements.
Thanks a lot for you help.
January 22, 2021 at 2:34 pm #1274730Hi force-media ,
Glad you got it working for you! :)
If you need further assistance please let us know.
Best regards,
VictoriaJanuary 22, 2021 at 6:08 pm #1274826how did you implement that menu to enfold?
is it easy to do ?January 25, 2021 at 12:53 pm #1275246i did implement it as a sidebar widget, which was quite easy.
January 26, 2021 at 12:18 pm #1275456 -
AuthorPosts
- You must be logged in to reply to this topic.