primary-menu background color not changeable

Created on 8 June 2024, 10 months ago

In primary-menu the background color is not changeable!
I mean the Block behind then menue.

    Rgds
    Uwe

πŸ› Bug report
Status

Active

Version

1.0

Component

Code

Created by

πŸ‡©πŸ‡ͺGermany Uwe Loyal

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

Comments & Activities

  • Issue created by @Uwe Loyal
  • Assigned to flashwebcenter
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX

    Sure! Here's a revised version of your message:

    Hello,

    I have created a video explaining the colors in the theme. Please watch it for guidance. If you need further assistance, kindly provide a detailed description of the task along with a screenshot.

    Best wishes,
    Alaa

  • πŸ‡©πŸ‡ͺGermany Uwe Loyal

    All color of areas are configurationalable, only the block behind the menue not.
    See attached file (black box area behind the menue).

    Rgds
    Uwe

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

    Hello,

    I've duplicated the same look without encountering this issue, so I'm unsure what's causing it without inspecting the page to identify the conflict. I'd be happy to check if you can provide a URL. Meanwhile, you should inspect the page to understand what's happening.

    I've attached two screenshots: one showing the look and another with the colors I used to achieve it. If you can't find the conflict, you can use this code in the theme settings under "Global Site" in the CSS Injector/CSS Dynamic to override the colors for the entire region.

    #page-wrapper #primary-menu { --r-bg:green!important;}


    Best wishes,
    Alaa

  • πŸ‡©πŸ‡ͺGermany Uwe Loyal

    Sorry, but my System is under developing in my homenetwork.

    But here are my settings:


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

    Hello,

    It seems that your settings do not specify a background color for the page. However, I noticed in the screenshot from https://www.drupal.org/files/issues/2024-06-08/error.jpg β†’ that there is a background color present. This indicates that some color settings might be configured elsewhere.

    To resolve this, you can start from scratch and replicate my settings:

    1. Disable and uninstall the Solo theme.
    2. Reinstall the Solo theme.
    3. Navigate to the theme settings and, under predefined color settings, select "None" under the category.
    4. Replicate the color settings as shown in my screenshot and then check the page.

    Best wishes,
    Alaa

  • πŸ‡©πŸ‡ͺGermany Uwe Loyal

    Ok, I think now it works!

    ;-)

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

    You are welcome!
    To change the size and height for the menu inside primary menu region:

    #primary-menu .navigation__menubar:not(.navigation__megamenu) li.nav__menu-item>a,
    #primary-menu .navigation__menubar:not(.navigation__megamenu) li.nav__menu-item>button {
      padding: 30px;
      font-size: 2rem;
    }

    Best wisehs,
    Alaa

  • Status changed to Fixed 10 months ago
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX
  • πŸ‡ΊπŸ‡ΈUnited States flashwebcenter Austin TX
  • πŸ‡©πŸ‡ͺGermany Uwe Loyal

    Sorry for late replay

    Where I can find the CSS-File for that?

    #primary-menu .navigation__menubar:not(.navigation__megamenu) li.nav__menu-item>a,
    #primary-menu .navigation__menubar:not(.navigation__megamenu) li.nav__menu-item>button {
    padding: 2rem;
    font-size: 2rem;
    }

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

    Hello,

    The file ../solo/css/components/solo-menu.css has the global settings for all menus line 74.

    .solo-inner .navigation__menubar:not(.navigation__megamenu) li.nav__menu-item>a,
    .solo-inner .navigation__menubar:not(.navigation__megamenu) li.nav__menu-item>button {
      padding: var(--solo-px12);
    }

    Best wishes,
    Alaa

  • πŸ‡©πŸ‡ͺGermany Uwe Loyal

    Did it, but nothing happend.

    Rgds
    Uwe

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

    Hello,

    The code in comment 11 applies only to the main menu. The code in comment 15 represents the global settings for all menus. If you want to target a specific menu, use the region ID or menu ID as shown in comment 11. To override the global settings for any menu on the site, attach an ID to the global settings so that the new CSS will override the existing global CSS.

    #page-wrapper .solo-inner .navigation__menubar:not(.navigation__megamenu) li.nav__menu-item>a,
    #page-wrapper .solo-inner .navigation__menubar:not(.navigation__megamenu) li.nav__menu-item>button {
      padding: var(--solo-px32);
    }

    Best wishes,
    Alaa

  • πŸ‡©πŸ‡ͺGermany Uwe Loyal

    Hello Alaa,

    after updating to new version and creating the side with your theme, I have another question.

    Is it possible to change the menu in design from 2nd level to 3rd level as a line and not as a block?
    now:

    new:

    Rgds
    Uwe

  • πŸ‡©πŸ‡ͺGermany Uwe Loyal

    Sorry, arrows wrong and changed:

Production build 0.71.5 2024