For consistency and best results, we kindly ask that you refrain from using any custom W3CSS menu twig in Solo's Sub-Theme. Please always copy the original template from the Solo Theme.

Created on 21 February 2024, 9 months ago
Updated 27 June 2024, 5 months ago

Problem/Motivation

Get dropdown menus that work on the d8w3css theme (and subtheme) to work on Solo

Install Solo. update to 1.01. Try to customize solo subtheme. Dropdowns don't work

Next steps?

πŸ’¬ Support request
Status

Fixed

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States fkelly

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @fkelly
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Hello,

    The Drupal dropdown menu will work with the Solo theme or any other theme unless you have a custom template for a sub-theme. If you've made custom templates using the d8w3css theme, you'll need to recreate them from the Solo theme. Check out this video for more on custom menus.

    https://www.youtube.com/watch?v=UJpNOawzl9E&list=PLZVSLeSmRrd1nqYAFOyalL...

    Best wishes,
    Alaa

  • πŸ‡ΊπŸ‡ΈUnited States fkelly

    I have had d8w3css running for over 5 years and have been very happy with the way drop down menus are set up. On my production site @fkelly.org you can see the dropdown menus ... these are generated from the d8w3ss subtheme and use files from both the /navigation and /layout directories in the subtheme. Example from the layout directory "page.html.twig" and from the navigation directory "menu.html.twig" and "menu_responsive-v.html.twig". (I copied these from the d8w3css subtheme). I customized the settings in the Solo theme and subtheme but am not sure what the necessary steps are to make the menus work with Solo (or its subtheme).

    I've uploaded a png of a working dropdown generated by the d8w3css theme and a not quite working one with the solo subtheme. I tried to follow the steps suggested in https://www.drupal.org/project/solo/issues/3420931 πŸ’¬ How to Create a Custom Sidebar Menu in the Solo Theme, Ensuring that Sub-menus Remain Open if They Contain an Active Link Fixed but obviously came up short somewhere.

    Can we use the code from the d8w3sss layout and navigation directories copied over to solo? Or how do we go about getting drop down menus to work as well in Solo as they do in d8w3ss? I'm coming from a contrib project named Juicebox where we use a LOT of photo galleries based on some 7 year old not open source Javascript code and it looks to me like we could use your slideshow capabilities from the paragraphs bundles module ... but first I need to get the menus from my d8w3ss based theme working in Solo.

    In the subtheme settings I did "Tick this box to load the W3.CSS library locally" and I also loaded the Font Awesome library. I was thinking that the w3css library might get me the "chevron" generating CSS that I need. But so far that's not working. I've looked at view source and can't see where the bold code at the top of the not quite working ... screen capture is coming from.

    Suggestions, directions welcome. (Incidentally the block copy module and instructions worked just fine. I had Solo up and running in a half hour using your video. thanks for that.)

  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Hello,

    The screenshot named "not quite working menu with solo subtheme.png" shows that the menu is using the standard sidebar template. You need to make a new template specifically for this sidebar. In the D8W3CSS theme, you used a template named "menu_responsive-v.html.twig," but for the Solo theme, you should use "menu--primary-sidebar-menu-template.html.twig."

    To fix this, copy the "menu--primary-sidebar-menu-template.html.twig" file from the Solo theme's templates/navigation folder to your sub-theme's templates/navigation folder. After copying, the file "menu--sidebar-first.html.twig" will become the default template for any menus on the left sidebar. If you only want to change this menu without affecting the whole sidebar, get the development version of Solo.

    Please avoid using custom templates from the old theme in the new one. If you had custom templates in the old theme, please create new ones for the Solo theme. You can do this by copying the default template from the Solo theme and then renaming it in your sub-theme, since some templates might have undergone significant changes.

    This is the video for custom menus: https://www.youtube.com/watch?v=UJpNOawzl9E&list=PLZVSLeSmRrd1nqYAFOyalL...

    Best wishes,
    Alaa

  • πŸ‡ΊπŸ‡ΈUnited States fkelly

    Thanks for your help. Taking your suggestion in #4 I have the sidebar menus working in my solo subtheme on my local system.

    One remaining issue: the left sidebar menus that I want to use have some very narrow (say, 5 characters or even less) fields. In
    the theme settings I have
    "The two columns' settings for main region
    20%, 80%
    The three columns' settings for main region
    20%, 60%, 20%"
    This helps a bit. But I still wind up with two separate menu items on the same line in the menu, for instance:

    Juggling my thoughts I AM

    where "Juggling my thoughts" is supposed to be one menu item and "I AM" another menu item on the next menu line.

    The "same" menu works just fine on my live site at fkelly.org using the d8w3css theme /subtheme but of course it uses a different twig template. I worked up a temporary kludge solution by appending .... (periods) to menu items that are "too short" to force a line break, but that's ugly. I'm not really familiar with editing twig templates and don't see how the template menu--responsive-v.html.twig from the d8w3ss inserts line breaks where I want them while the template from the solo subtheme doesn't.

    Otherwise my update to the solo theme is going very well. I am looking forward to trying out paragraphs bundles.

  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Hello,

    Thank you for the update and clarification regarding the sidebar menus. I appreciate your insight that the menu items do not have to be a certain length to function properly, and that you've successfully tested a menu item with just one letter.

    Sidebar menu items are intended to remain on one line regardless of screen size. I understand now that the issue may lie within the specific template handling the rendering of the sidebar menus in your sub-theme.

    To make sure the sidebar menu works correctly, you need to copy the menu--primary-sidebar-menu-template.html.twig file from your main theme to your sub-theme. Rename it to menu--sidebar-first.html.twig. This step ensures that the correct template is applied to the sidebar menu.
    In the screenshot I have one letter menu item and it is using the custom template.

    If you could provide a link, I'd be happy to take a closer look and see if I can identify any potential issues causing the unexpected behavior with the sidebar menus. This will allow me to provide more targeted assistance in resolving the problem.

    Best wishes,
    Alaa

  • πŸ‡ΊπŸ‡ΈUnited States fkelly

    The solution in #6 worked perfectly, almost. I was able to copy the file as you suggested. After clearing cache the resulting menu worked better. I went into structure/menu and edited the menu where I had appended ... (periods) to the shorter menu items and got rid of the ugly periods. Saved, cleared cache and retested the menu ... all seems fixed.

    Almost. I uploaded a file showing one remaining problem. With the template from the base theme the link at the top of the Menu (to the right of the menu name) where you should be able to configure block. remove block or edit menu is "obscured". I could work around that by going into structure/menus and editing the menu there.

    Eventually I'd like to use the "click" version of the sidebar template ... which has the name (I think) menu--responsive-menu-template.click.html.twig. Is that the right one to use in place of menu-primary-sidebar-menu-template.html.twig in the theme? By the way, the way PHPStorm manages files and caches your whole "project" means it doesn't have a convenient rename file capability.

    My solo experimentation site is on my Wampserver locally so I can't give you a link to it.

    Thanks again for your help. This is progress and promising.

  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Hello,

    To access the link for configuring the menu located on the top right, kindly download the development version. It should include the fix to display it correctly.

    Please refer to the image below for the z-index issue:

    Additionally, each sidebar (left and right) and the footer have their own custom templates.

    Best regards,
    Alaa

  • πŸ‡ΊπŸ‡ΈUnited States fkelly

    re. #9 I installed the development release you suggested and it fixed the problem. Thanks.

  • Assigned to flashwebcenter
  • Status changed to Fixed 8 months ago
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX
  • Status changed to Fixed 8 months ago
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States fkelly
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX
Production build 0.71.5 2024