Code Injection causing issues in mobile, but not desktop?

Themes
1

Hi!

I have been experimenting with a little code injection on my site.
One thing I wanted to do was to keep the menus from jumping around when one navigates from the Home page to the sub-posts pages.

So I used

<script> var element = document.querySelector("body");
element.classList.add("home-template");
</script>

This worked for what I was intending, at least on Desktop. (Prior to using this, the menus would be at the top of the page, and then jump down to beneath the banner, depending on which page you were on).

The problem is that when view as mobile, the = sign looking menu button has gone invisible (it’s actually still there and can be clicked, just invisible). I’ve tried selecting the element that I think is for this menu button, but to no avail. Any tips would be appreciated.

Thanks!

2

.gh-burger:before, .gh-burger:after {background-color: white!important;}

1 Like
3

After breaking it up as follows, it worked like a charm- and I learned a little bit in the process! Thanks for all your help.

<style>
.gh-burger:before {background-color: white!important;}
</style>
<style>
.gh-burger:after   {background-color: white!important;}
</style>
1 Like
4

Oops, sorry- I was missing a comma! Correcting the post now! :)