Main menu first level

Created on 29 April 2024, 7 months ago
Updated 27 June 2024, 5 months ago

What is the name of the first level of the main menu

Thank you for SOLO. Love it. I have a problem.
I want to put the main menu on the Logo image.
Therefore, I want to make level 0 transparent in the main menu. When I use the predefined color scheme (Classic Ivory Lace), I don't know what to apply the transparency to.
Thank,
your

πŸ’¬ Support request
Status

Fixed

Version

1.0

Component

Documentation

Created by

πŸ‡­πŸ‡ΊHungary f.sor

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

Comments & Activities

  • Issue created by @f.sor
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Thank you for reaching out and for your kind words about SOLO! To make the level 0 background of the main menu transparent over the logo image while using the "Classic Ivory Lace" color scheme, you'll need to modify the CSS directly through Chrome's Inspect tool.
    The name for the main navigation is "navigation__menubar-main".

    .navigation__menubar-main li.li-1 {
    --r-bg: transparent!important;
    }

    Best wishes,
    Alaa

  • πŸ‡­πŸ‡ΊHungary f.sor

    Thank you for your quick response. Unfortunately, it doesn't work.

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

    Did you clear cache after making the change?

  • πŸ‡­πŸ‡ΊHungary f.sor

    Naturally. I have been programming for forty years.

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

    Thank you @fkelly.
    @f.sor, the previous code sets the li element to be transparent. However, you will still need to disable any colors applied within the menu region, including the anchor tags and buttons contained within the li. Here is an example:

    /* Disalbe links and button in the first level and primary menu Ul and region */
    #primary-menu,
    #primary-menu .navigation__menubar-main,
    #primary-menu .navigation__menubar-main li.li-1 > a,
    #primary-menu .navigation__menubar-main li.li-1 > button,
    #primary-menu .navigation__menubar-main li.li-1 > a:hover,
    #primary-menu .navigation__menubar-main li.li-1 > button:hover {
      --r-bg: transparent;
    }
    /* Apply background image to LI */
    #primary-menu .navigation__menubar-main li.li-1 {
      --r-bg: transparent url("https://www.w3schools.com/cssref/paper.gif") repeat !important;
      background: var(--r-bg);
    }



    If you're using a sub-theme, please add the CSS to that sub-theme. If not, navigate to your-site.com/admin/appearance/settings/solo, expand the "Global Site" section, and paste the CSS into the "CSS Dynamic" field. Remember to clear the caches afterward. For further customization, use the Google Chrome Inspector; the same methods can be applied. Note: This code is designed for the "main" menu located in the Primary Menu region.




    Best wishes,
    Alaa

  • πŸ‡­πŸ‡ΊHungary f.sor

    Yeees!
    Thank you very much Alaa, you are very kind!

    The first part of your code plus the second small change solved it (#primary-menu .navigation__menubar-main li:not(.li-1) )

  • Status changed to Fixed 7 months ago
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    You're welcome! If you have any more questions or need further assistance, feel free to ask. Happy to help!

  • Automatically closed - issue fixed for 2 weeks with no activity.

  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX
Production build 0.71.5 2024