Hmm, the menu goes invisible when scrolling down

The menu toggle is not fixed in this theme, but you can add some custom CSS to get that effect. This should be all you need:

.menu-toggle {
  position: fixed;
}

Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.

Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module, if you haven’t already. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

Kathryn, thank you so much for the reply.

I’ve added the code into my plugin, but, unfortunately:
– On the home page it works fine (it remains when I scroll down), but the top half of the button is cut off as it has moved a few pixels up
– On my posts (if I “read” one of my posts), the top half of the button is cut off, and it doesn’t go beyond the featured image. In other words, when I scroll down to the paragraphs, it disappears and hides behind the background

If you have any idea as to how to fix this, I’d be more than appreciative.

Thank you in advance.

– On the home page it works fine (it remains when I scroll down), but the top half of the button is cut off as it has moved a few pixels up

I’m not seeing this. Could you specify:

– what device (i.e. PC laptop)
– what OS (i.e. Windows 8.1)
– what browser and version (i.e. Chrome 43.345)

– On my posts (if I “read” one of my posts), the top half of the button is cut off, and it doesn’t go beyond the featured image. In other words, when I scroll down to the paragraphs, it disappears and hides behind the background

I’m not seeing anything being cut off, so let’s see what you come back with in terms of the questions I asked above and we’ll try to troubleshoot that.

It disappears as you scroll down not because it’s hiding behind the background, but because the light menu toggle is not visible against the white page background.

You can change the colour of the menu toggle on single posts with this custom CSS:

/* Single post */
.single .menu-toggle,
.error404 .menu-toggle,
.search-no-results .menu-toggle {
    border-color: #bb00bb;
}
.single .menu-toggle .lines,
.error404 .menu-toggle .lines,
.search-no-results .menu-toggle .lines {
    background: #bb00bb;
}
.single .menu-toggle .lines:before,
.single .menu-toggle .lines:after,
.error404 .menu-toggle .lines:before,
.error404 .menu-toggle .lines:after,
.search-no-results .menu-toggle .lines:before,
.search-no-results .menu-toggle .lines:after {
    background: #bb00bb;
}
.single .menu-toggle:hover,
.error404 .menu-toggle:hover,
.search-no-results .menu-toggle:hover {
    color: #bb00bb;
    border-color: #bb00bb;
}
.single .menu-toggle:hover .lines,
.error404 .menu-toggle:hover .lines,
.search-no-results .menu-toggle:hover .lines {
    background: #bb00bb;
}
.single .menu-toggle:hover .lines:before,
.single .menu-toggle:hover .lines:after,
.error404 .menu-toggle:hover .lines:before,
.error404 .menu-toggle:hover .lines:after,
.search-no-results .menu-toggle:hover .lines:before,
.search-no-results .menu-toggle:hover .lines:after {
    background: #bb00bb;
}
.single .menu-toggle.x.toggle-on .lines:before,
.single .menu-toggle.x.toggle-on .lines:after,
.error404 .menu-toggle.x.toggle-on .lines:before,
.error404 .menu-toggle.x.toggle-on .lines:after,
.search-no-results .menu-toggle.x.toggle-on .lines:before,
.search-no-results .menu-toggle.x.toggle-on .lines:after {
    background: #bb00bb;
}

Change bb00bb to whatever colour code you prefer.

Ahh, yes! I realized it was cut off because I had the wordpress admin-panel activated.

That code worked like a charm, thank you for all your help Kathryn.

I just have one concern, though: When I toggle the menu, I seem to have no way to close it except through clicking Esc.

In other words, the toggle off button seems to have disappeared as I fixed the position of thetoggle on button. Is there any way to get around this?

Thank you ?

You’re welcome!

Try resetting the original absolute positioning on the menu toggle when it’s in the “toggled on” (aka panel open) state:

.menu-toggle.toggle-on {
    position: absolute;
    right: 1.5em;
    top: 0.75em;
}

Thank you for the piece of code, Kathryn.

I inserted it, and it works fine when I’m on the top of the page/post, i.e. the buttons “original position.”

However, when I scroll down and press the toggle-on-button, the toggle-off-button can only be found at the top of the page – i.e. the buttons “original position.”

Is there any way to make the toggle-off-button appear next to the menu; no matter where on the page/post I am?

Thank you for your patience with me.

I can’t think of a way to do that, because that would require the button to be both position: fixed and position: absolute — and we need to pick only one. Perhaps someone else knows of a workaround.

Gotcha, thanks Kathryn. I appreciate the help.