I am using a copy/child theme of the Dreamhome Theme. In the mobile menu, when clicking the hamburger menu, a white screen comes up. The menu items exist because I can click on them, and it takes me to the pages, but my best guess is that it’s white text on a white background.
A friend of mine is editing the child.css file in the Dreamhome Copy files and added: @media (max-width: 767px) {
.custom-menu-primary .hs-menu-wrapper > ul > li a {
color: black !important;
}
}
In the base.html file, this code was put in:
{{ require_css(get_public_template_url(“child.css”)) }}
The style is not applying even though I confirmed the page is using the child theme, the child.css is published, and the require_css line is at the bottom of the <head>.
My friend is saying that the parent’s theme’s CSS is overriding mine, or the child.css isn’t being read at all. What is the way to ensure the custom CSS is applied so I can make the items visible when I open the hamburger menu?
@media (max-width:767px){
.custom-menu-primary .hs-menu-wrapper > ul > li > a{
color:#000;
}
}
Changing the color via browser inspect tool works for me without !imortant.
So it might be a child-theme thing.
If you/your friend haven’t changed the fields.json usage, you can try changing the font color in the theme settings
Also - If you have modified the base.html, make sure that your child.css is getting loaded after all other CSS files.
TBH - the base.html of the parent theme looks very odd to me, so it might be the source of the issue.
The loading order of the CSS files is:
main.css → potential template css files → theme.css → animate.css → global.css → splide.css → Poppins font directly from Google → child.css (get’s loaded in the standard_header_includes HubL)
Furthermore, it’s loading a bunch of theme related JS files regardless if they’re required for a page or not.
IMO it’s not the best approach as this may have a huge performance impact loading all CSS and JS files this way. (I’m encountering layer shifts without touching any code)
Therefore, if you’re not “knees deep” into development and page creation, you might want to consider looking for a different theme to start from as optimizing the (child) theme for performance and everything else may come close to rewriting everything.
edit:
The way how child themes work is, that they usually overwrite the parent theme settings.
How did you create your child theme and what modifications did you/your friend make to it?
Hey @ASzewczyk, this might be a CSS specificity and loading order issue. A reliable way to ensure that the style persist is to add it in the Header module by cloning it to the child theme then add your CSS style within the module.html in the design manager.
{% require_css %}
<style>
{% scope_css %}
@media (max-width: 767px) {
.custom-menu-primary .hs-menu-wrapper > ul > li a {
color: black;
}
}
{% end_scope_css%}
</style>
{% end_require_css %}
This will apply the CSS styling in the module-level and is assumming that you are using the correct CSS selector.
