Adding drop-down nav menu functionality to CeeVee theme

Support Themes & Styling
1

This seems to be an issue that has been brought up several times, with zero resolution. At least, everything I’ve found searching for it has not once been resolved.

Trying to implement drop-down menu functionality in the navigation menu, on a theme that did not have such set up initially (in my case, CeeVee). The child menu items do show up, but instead of it being a drop-down, it just stacks the menu, putting the item that has the child page on its own separate line with no actual “drop-down” element.

I’ve looked through the help files, but can’t find anything. Apparently there HAD been a cookbook page on the topic, but it appears to no longer exist.

Any help? Please?

2

If you want to implement a feature that your theme doesn’t have, the first thing you should do is program and test it in a child theme. You’ll need to implement the programming logic yourself if the theme developer hasn’t already done so.

Of course, you’ll have to implement it in the templates that handle navigation (usually navigation and/or macros) and as an option that can be enabled or disabled in the theme settings.

You can take a look at the Editorial or Future2021 themes, which initially didn’t have this option.

3

i would suggest you to create an example html page with its js and css.

you can use for example https://codepen.io/ to try things and show what you want to us like drop-down you are talking. you may use example items for drop-down to see if and how it works on page.

when html-js-css code is ready, it is not so hard to put items from real website.

later you can use real ones from your website with using twig. you may look to “learn grav” or ask to ai or ask to us how to put real ones via twig to your example html code for your theme.

4

Admittedly, my CSS skills are probably >15 years old, so I honestly wasn’t sure what I was missing. But, having found a CSS generator for precisely what I was looking for, I figured it out.

For the record, in case anyone else is coming upon this in the future looking for the same thing:

  1. Set the class of the UL of your submenu to something you can use to define CSS; I used “submenu”.

  2. Use the following style definitions in your CSS, defined for that “submenu” item:

    	height: auto;
	overflow: hidden;
	position: absolute;
	z-index: 99;
	display: none;

And that’s literally all I did.

5

@Baphijmm, Your “solution” could be much more helpful, if you added:

  • the Twig code you’ve used to generate the navigation structure,
  • to which template file of the CeeVee theme you’ve added the navigation partial,
  • plus the css/scss you’ve used to style the entire dropdown menu