Hi there,
You are a master. Thank you so much. My child theme is all loaded up and ready for me to do my worst (or best, let’s hope its my best).
I’m glad you got the child theme up and running! ??
As a note: I double checked your child theme’s style.css file and it seems you copied over all of the CSS from the parent theme’s file.
Your parent theme’s CSS is always going to be loaded first and it’s not necessary to load it again via your child theme.
The child theme’s CSS will be loaded after and will override the parent theme’s. With this in mind, you only need to include CSS in the child theme’s style.css file that changes the default style of your site.
My colleague, Kathryn, gave a presentation on child themes here that does a really good job of explaining how different files are loaded and how overrides work. I definitely recommend giving it a watch:
The menu icon is now missing its hamburger and shows instead an odd little square, not quite centered.
The hamburger icon is pulled in via the following CSS:
.menu-toggle:before {
position: absolute;
top: 0;
left: 0;
background: #fff;
color: #303030;
content: "\e601";
display: inline-block;
width: 48px;
height: 48px;
font-family: "Edincon";
font-size: 16px;
line-height: 48px;
text-decoration: inherit;
font-weight: normal;
font-style: normal;
vertical-align: top;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Specifically, content: “\e601” is the code for the hamburger genericon.
The genericon is not being loaded correctly in your child theme’s style.css and I think the conflict between the three different CSS files (parent theme, child theme, and Jetpack) could be to blame.
As a starting point, could you please remove the unneeded CSS from your child theme’s style.css file? Any changes you make to the default styles can be added to either Jetpack’s custom CSS editor or your child theme’s style.css file.
We can work from there if the icon is still not loading correctly after that.
Also, whereas before on hover the entire circle, hamburger and word “menu” turned from gray to #04BF7B, now only the word and the odd square use that color, and the circle uses the Edin default color.
The following is included in your child theme’s style.css file, which is loading after (and therefore takes precedence over) the custom CSS you’ve added to Jetpack:
@media screen and (min-width: 768px) {
.search-toggle:hover, .search-toggle:active {
color: #1279be;
}
}
After you have removed all unnecessary CSS from your child theme’s file, let me know if the trouble with the hover colours continues.