Off canvas menu - mobile - adding heading inside overlay

Hi Polyvios,

You can try using a block element to insert the content.
https://docs.generatepress.com/article/block-element-overview/

Choose hookas block element type, chooseinside_slideout_menuas hook name, choose entire site as location.

Once it's done, we can take a look then for CSS tweaks :)

Yup that step is done

I haven't seen any changes being made yet, can you make sure the cache is cleared?

I tried again - I think now it's worked

Do you see the content added to the off canvas menu on your end?

I still don't see anything.

Can you take a screenshot of the block element that you created?
https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

Just got it - now I can see it. I was setting things up wrong..

Now I need to change the font size, make it bold and underline it

Are you using a block element?

If so, I would recommend to install GenerateBlcoks as block editor:
https://wordpress.org/plugins/generateblocks/

Once the plugin is activated, you should be able to add and style the text by using a Headline block directedly in the block element.

I started again - I think it now appears fine. I have edited it - how can I add a line underneath though? Also, can I use a typography I uploaded on wordpress instead of the standard options?

You can give this CSS a try, modify the value accordingly:

#generate-slideout-menu p {
    border-bottom: 2px solid #000000;
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
    font-family: your-custom-font;
}

If you use Headline block from GB, then you can add border/change color/fonts within its settings, no CSS is required.

For the font family, is it working already for the content in posts or pages?

If so, you can just add CSS to call it like the last line in the above CSS.

That works well, thank you!

A few more things re this feature:

- how could I have this heading be on the same line as the exit icon (X) ?
- how could I add a line at the top of this heading as well?
- Could I make this heading clickable so that it redirects to the homepage upon selection?

Hi there,

Are you trying to make it appear like this? - https://share.getcloudapp.com/NQuY9BbN

If so, you can try adding this CSS:

#generate-slideout-menu button.slideout-exit + p {
    position: absolute;
    padding-top: 25px;
}

The line underneath has appeared however the exit icon is now not responding

Also how could I also have a line above the heading ?

Could I move the heading to the left- it currently sits in the centre despite changing the element to have it further left

Lastly I would like if possible to have the heading clickable so that you go back to Homepage upon selecting it

The line underneath has appeared however the exit icon is now not responding

Ah right. my bad. I forgot to include this:

#generate-slideout-menu button.slideout-exit {
    z-index: 999999;
}

Could I move the heading to the left- it currently sits in the centre despite changing the element to have it further left

Lastly I would like if possible to have the heading clickable so that you go back to Homepage upon selecting it

Can you let us access the site again? So I can inspect the page and provide advice on the necessary modification.

Site is now public again