How to Apply Colors to the Main Menu and Change Padding and Font Size

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

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

Rgds
Uwe

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

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

But here are my settings:

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

Ok, I think now it works!

;-)

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

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;
}

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

Did it, but nothing happend.

Rgds
Uwe

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