Hi, I have a problem. When I’m in dev tools and click as shown in the picture, everything looks fine. How can I apply this so that only what is in the picture is white, and not the whole thing, because when I add it to the code, everything changes, including the text in the navigation menu and where it should be.
I have the code here, but since there is no space left on Shopify because I exceeded the character limit, where should I insert it with this new solution?
To only style the “Plakaty” dropdown without affecting other parts:
When customizing your navigation dropdowns, it’s important to avoid using global selectors, as they can unintentionally apply styles across your entire menu.
Avoid Using Global Selectors
For Example, this code:
.header__menu-item a,
.header__menu-item {
color: blue;
}
It will change the color for all navigation links, including your main menu items and all dropdowns, because it’s a global selector.
Use Specific Selectors for Submenus Only
To target only the dropdown menu items (like the “Plakaty” submenu), use a more specific class:
.header__submenu .header__menu-item {
color: white !important;
}
Hello @Bajgor I see what’s happening here – your current CSS selector:
css.header__menu-item a,
.header__menu-item {
font-weight: bold !important;
font-size: 20px !important;
color: blue;
}
is applying the style to all menu items, including the top-level navigation links, because .header__menu-item is used globally.
You only want the dropdown items inside the “Plakaty” submenu to be styled differently.
In the screenshot, that submenu has the ID #HeaderMenu-MenuList-2.
Here’s the adjusted CSS that will affect only the submenu items:
#HeaderMenu-MenuList-2 .header__menu-item a {
font-weight: bold !important;
font-size: 20px !important;
color: white !important;
}
This way:
. It only targets links (a) inside the submenu with ID HeaderMenu-MenuList-2.
. The top navigation menu remains unaffected.
Where to Insert This Code
Since you’ve hit the character limit in the “Custom CSS” section of your theme editor, you can:
Add it to your theme’s base.css (or theme.css) file:
. Go to Online Store → Themes → Actions → Edit Code
. Open assets/base.css (or theme.css)
. Scroll to the bottom of the file and paste the above CSS.
Save changes.
Alternatively, you can create a new CSS file (e.g., custom-menu.css) and include it in your theme.liquid file, but option 1 is simpler.
You can remove the CSS code from the current section, then open the base.css file and add the new custom CSS there.
Step 1:
Go to your Shopify admin > Online Store > Themes.
Step 2:
Click “Actions” on your current theme, then select “Edit code”.
Step 3:
In the Assets folder, locate and open the file named base.css (or theme.css, depending on your theme).
Step 4:
Delete the inline CSS code previously added in the current section (if any).
Step 5:
At the bottom of the base.css file, add your new custom CSS code.
Step 6:
Click Save, then refresh your storefront to check the changes.
Please let me know if it works as expected.
Best regards!
