Smooth-Scroll option adding #top to url when click the Slide-Out Menu Toggle But

forgot to notify of follow-up emails

Hi Randy,

I don't see the smooth-scroll class being added to the sign in button, so actually the smooth-scroll effect is not working for it.

When smooth scroll is enabled, if the link is#, it will scroll to the top by default, that's where the #top comes from.

Anyway I don't think you need to enable smooth-scroll just for the slide out menu, since it has its own slide out effect built in already.

Let me know :)

I'm using the smooth-scroll for other stuff on the site and really like how it works.
You're right, the link for the slide-out button is "#" so that must be where the #top is coming from.

So maybe the question is what/how can I set the slide-out menu button to be set to something other than "#" so that it doesn't scroll to the top when clicked and destroy the existing url query parameters.

Give this solution a try:

Use #contribute for example, instead of just # for the slide-out button.

And I don't see the URL being changed even with #top at the end, what browser are you using?
https://www.screencast.com/t/kVjTQOjPFS

Yeah, its inconsistent behavior. If you click around the map, then click the "Sign In or Join" it often drops the query parameters/updates to the parameters.

But maybe a stupid question...where do I set that "#" to another name for the button that triggers the off canvas menu ("Sign In or Join")? I'm looking under Appearance > Menus and select the Off Canvas Menu. But it is an empty menu so I'm not sure where to set the menu id to something other than "#"

I looked also under Customize > Menus > and I have a menu named Account assigned to the off-canvas menu. But again there are no items in this "menu" as I'm just using it as a king of off-canvas widget.

I guess I'm kind of doing like what is shown here: https://docs.generatepress.com/article/off-canvas-panel-overview/ :
"Off Canvas Panel Widget Area
The off canvas panel has a widget area, which you can add widgets to in Appearance > Widgets or Customize > Widgets.
You can simply use for widgets, and leave out the navigation completely if you like!"

I'm then populating the off canvas menu using Hook Elements and the generate_inside_slideout_navigation hook

So...long way of saying I still don't see where/how to set the "#" to another id/name for the button that triggers the off canvas menu ("Sign In or Join" button)

Ah I see, the button is off canvas menu icon itself, instead of adding a menu bar item.

There's a work around:

1. Go to appearance > element, create a hook element.

2. Paste this to the content area:

<span class="menu-bar-item slideout-toggle hide-on-mobile"><a href="#contribute">
	<span class="gp-icon pro-menu-bars"></span>
	<span class="off-canvas-toggle-label">Sign In or Join</span></a></span>

3. Choose generate_menu_bar_items as hook, choose entire site as location.

4. Remove the label you set for off canvas panel.

Let me know if it works.

Ok, this is getting really complicated :)

I did as you said...I'm not sure if I did step 4 correctly or not.

Either way, I'm having artifacts in front of the button. And it seems to be doubling up. This seems really complicated just to get a Off Canvas toggle button in place. Is there a better way to approach this?

Might be to do with some of these customizations in the style sheet:

/* start off-panel-canvas */
.off-canvas-toggle-label:before {
content: "";
height: 13px;
width: 11px;
background-image: url("/map-images/profile.svg");
display: inline-block;
margin-right: 7px;
}
body .offside--right.is-open, body .offside-js--is-right .offside-sliding-element {
-webkit-transform: translate3d(-370px, 0, 0);
-moz-transform: translate3d(-370px, 0, 0);
-ms-transform: translate3d(-370px, 0, 0);
-o-transform: translate3d(-370px, 0, 0);
transform: translate3d(-370px, 0, 0);
}
body .main-navigation.offside {
width: 370px;
}
body .offside--right {
right: -370px;
}
.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
right: 370px !important;
}
.nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header .main-navigation .inside-navigation.grid-container {
padding: 0;
}
.main-navigation.offside {
text-align: center;
padding-top: 40px;
}
.slideout-overlay {
background-color: rgba(255, 255, 255, 0.75);
}
.menu-bar-item.slideout-toggle .gp-icon.pro-menu-bars {
display: none !important
}
@media screen and (max-width:768px) {
.menu-bar-item.slideout-toggle{display: unset !important}
}
@media screen and (max-width:1325px) {
#primary-menu {order: 1 !important;}
}
/* end off-panel-canvas */

I decided to go to the javascript path for now:
document.querySelector('#site-navigation .slideout-toggle a').href = "#signinorjoin";
document.querySelector('#mobile-header .slideout-toggle a').href = "#signinorjoin";

Unless you know of a better way to be managing a simple off-canvas slide out panel in general

As long as it works, it's a good solution :)
That seems working perfectly.