Hmm, the menu goes invisible when scrolling down

Resolved Sunnysw
(@sunnysw)

7 years, 11 months ago

Hey guys!

First off, this theme is gorgeous. Superb work, I cannot say otherwise.

I just have one concern right now, though, which is that: When I scroll down, the menu toggle seems to disappear.

This is my site: http://www.genecarlyle.com

Is it possible to, when scrolling down, still be able to see and click that square up in the top right corner? That is, so its position is fixed?

Thank you guys a ton.

Viewing 9 replies - 1 through 9 (of 9 total)

Moderator Kathryn Presner
(@zoonini)

7 years, 11 months ago
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.
Thread Starter Sunnysw
(@sunnysw)

7 years, 11 months ago

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.

Moderator Kathryn Presner
(@zoonini)

7 years, 11 months ago

– 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)
Moderator Kathryn Presner
(@zoonini)

7 years, 11 months ago
– 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.
Thread Starter Sunnysw
(@sunnysw)

7 years, 11 months ago

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 ♥
Moderator Kathryn Presner
(@zoonini)

7 years, 11 months ago
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;
}
```
Thread Starter Sunnysw
(@sunnysw)

7 years, 11 months ago

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.

Moderator Kathryn Presner
(@zoonini)

7 years, 11 months ago

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.

Thread Starter Sunnysw
(@sunnysw)

7 years, 11 months ago

Gotcha, thanks Kathryn. I appreciate the help.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Hmm, the menu goes invisible when scrolling down’ is closed to new replies.