Hello there,
is it possible to add a custom button (button element) to the off canvas area of the mobile menu?
Thanks
Hello @xoa,
Thanks for writing to us
Yes you can add button in the canvas area
You need to create a Global Block with the Button element and use that as a shortcode in your Off-Canvas content.
Here you can learn how to create a Global Blocks and use it as a shortcode.
Otherwise, you can create it by HTML and CSS code
Follow this link to create a button with HTML and CSS code
Thanks
Ok, thanks. I was able to create the global block. But then, how to add the GlobalBlock inside the “collapsed navigation”?
Hello @xoa
Through Global block, you can add both navigation and button.
Now copy the Global block shortcode that you created.
Canvas Element.
Now go to Off-Canvas Content area -> add the shortcode here
Thanks
I’m sorry, but I can’t find the Off-Canvas Content area section where I could put my shortcode. 
Hello @xoa,
Collapsed Navigation element will only allow you to assign a menu. You can not add any other element. You will have to edit your custom header and replace the Navigation Collapsed element with a Content Area Off-Canvas element as illustrated by @PrakashS. There should be an Off-Canvas content option where you can insert the Global Block shortcode that you just created. If nothing is helping, kindly provide us your WP credentials and the name of the custom header if you have created several other headers. In your next post reply, include the following details in a secure note:
- WP login url
- WP username
- WP password
To know how you can create a secure note, please check out this article on how to get support: How The Forum Works
Best Regards.
Ohh, now I got it. Wow, that’s a cool feature. It’s amazing what you can do with Pro. Great work guys.
Still, I have one more question left.
In my off-canvas area I added a line on the very top. How to avoid, that that line disappears when scrolling the mobile menu (once the items are collapsed)?
That line should be sticky all the time in my mobile menu, but should not be a part of the menu bar once I close the mobile menu.
Hello @xoa,
The line element were added inside the section which is also part of the off-canvas content area. If you want the like to always appear even if you scroll the content, the line should be added as a bottom border in your bar settings instead.
Hope this makes sense.
Ok, I understand. But I want the line only shown when the mobile menu is collapsed.
Hi @xoa,
If that is the case, then the line should be removed from your global block and add a top border for your content area.
I used a red color so that you can easily see the changes. You can set the top border color in Content Area > Dropdown > Border.
Hope this helps.
Hm, I don’t think that solved my problem.
Lets try it this way:
In my off canvas content area I have the mobile menu and this big yellow button. When the menu scrolls, also the button scrolls. Hot to make the button sticky to the bottom in my off canvas content area mobile menu? So in fact, the menu goes under the button upon scrolling, while the button remains always visible on top and sticky at the bottom in the collapsed mobile menu.
Hi @xoa,
Regretfully, we are not entirely certain of what you’re trying to do, please clarify. And please provide us login credentials in a secure note so we can take a closer look.
Thanks,
@friech
Thanks for replying me. I try to explain it step by step. Therefor we need this two screenshots from the mobile menu.
On the 1st screenshot on the left you see the mobile menu. The screen is large enough to show the whole menu without scrollbar. The line on top is there as well the button on the bottom. Ok, perfect. This is how it should look like.
Now, let’s come to the 2nd screenshot on the right. Here, the screen/display is smaller then the menu with a expanded submenu. As a result, the yellow button is cut off(out of screen). So I need to scroll to see the button again. But as soon as I start scrolling, I loose the line on top (red arrow point to the line in the first screenshot). Obviously, because the line is in a container in the Global Off-Canvas Content area.
So now my question is, if it is possible to make that line on top and also maybe the button at the bottom sticky. So that they are not affected and go out of canvas anymore when I have to scroll in the expanded menu.
Everything starting & including from the line downwards is in the Global block off canvas content area I’ve set up.
Of course I can set a bottom border to the top bar, but that is not what I want, because then I still have the line(border) even when the mobile menu is not active.
I hope it is a bit more understandable now. Thanks a lot guys!
Hey @xoa,
Regarding the line, I see you’re using the Line element and it was added withing the Global Block so it’s included when you scroll the global block.
The solution to that is remove the line element and instead set up the bottom border of your mobile bar.
Regarding the sticky button, it’s not possible natively so if you don’t know the CSS required to achieve that, you need to consult with a developer.
I’d recommend instead that you place the button in the Bottom Header because that is positioned at the bottom of the screen and is permanently fixed there.
Hope that helps.
That with the Button could be a solution. But then again, the button is also there, if the menu is closed and not in use.
Hey @xoa,
Another solution could be to move your button to the top of the menu instead of showing it at the bottom, this way it will always be visible no matter how big your menu is.
Hope this helps!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.