Offcanvas Header - can't change header *solved*

Hey all,

I’m trying to find a way to edit the brand name in the off canvas header. I made the offcanvas menu visible on all breakpoints and I’m able to see and edit the offcanvas body, but not the header where the brand name resides.

Is that a bug, or am I just missing something?

Is this an Offcanvas in a template? The stock BSS Offcanvas component doesn’t have a brand name in the header. It just has a Heading and a Close button. Can you post an image of your workspace with the Overview panel expanded, showing the brand name component?

1 Like

There you go. I used a completely setup offcanvas component from the online tab. Using the studio offcanvas component has a heading instead of a link in the offcanvas header but also leaves me unable to edit the offcanvas header. It’s not even showing on the canvas. Only the offcanvas body shows and is editable.

Using something you downloaded from the online library can introduced variables I cannot account for without seeing the actual code of the website. There are tons of poorly made components in the online library. What is the name of the Off Canvas component you downloaded?

When trying to track down these kinds of bugs, I recommend the following…

  1. Create a brand new website file. Add the stock BSS Off Canvas Component and a button to trigger it, and test it in a browser preview. This will tell you right away if it’s an issue with the code in your website, or a bug in the software. (See the image below where I have done this. You can see that everything is working normally.)

  2. Temporarily disable your entire custom CSS file (styles.css) and see if you are able to edit the Off Canvas component. If you are, then there are some CSS rules that are causing your problem.

  3. Make sure there are no inline styles used in the Off Canvas component.

  4. Post a link to your website with the problem, and let the forum community have a look.

Why did you download an Off Canvas from the library, and not use the one included in BSS? It’s easy enough to customize it with a standard Boostrap Navbar with a Brand link.

Thanks for your answer, @printninja

I used the online component, because it was all setup and ready to go and I was just lazy. It doesn’t use any custom css, only BS5 utility classes. I prefer to add custom css myself.

I already described in my previous post, that using the included Offcanvas Component doesn’t change the issue: I am not able to change anything that’s inside the Offcanvas Header. And it does not matter if it’s the online component or the one that comes with BSS. Setting the Offcanvas Component to be visible on the canvas (SM and above), enables me to edit the Offcanvas Body, which I can see and click to edit, but not the Offcanvas Header. It’s not even visible on the canvas. No matter what.

The project is brand new, I only added a navbar with a container below that has a bg-image and two heading. Even on a new project, the issue is still there. With both components (online and studio)

Have you tried to set the offcanvas to be visible and edit the header? And does that work for you? Because it isn’t for me.

I have no issues with editing the header text in the Off Canvas menu. I’m on a Windows machine. Maybe you’ve found a bug?


In the options panel for the offcanvas set the Show in Body to something else than Never and edit the header

It looks like a bug to me

1 Like

Hm… that an issue for BSS on Mac OS only? For me, the header isn’t even visible. I can edit the offcanvas body only.


if you set the Show in Body to Never then you can edit the header as well and the offcanvas works as you expect

1 Like

Thanks @kuligaposten. I swear I tried that before. But double clicking did the trick. Still doesn’t make sense to me, that only the offcanvas body is visible when I set the offcanvas visibility to anything else then never in the sidebar.

Yes, you are correct. It’s a bug. As soon as you go above the chosen breakpoint, the CSS goes all wonky. The header gets set to display:none, the width is gone, and all the flexbox settings are messed up.

If you drop an off canvas component to a design and set the Show in Body to something else than Never then the off canvas component gets messed up, but if you convert it to HTML and after convert it back to Component then it works as expected

Very interesting. Guess it’s some sort of bug in the UI. It’s funny how these bugs always seem to be discovered on weekends. Have you ever noticed that?

Thank you for the report and tracking down the problem! We will fix it in our next update.