Public Forums 71,145 posts

[bascop Friend bascopJoin date: February 2015Posts: 9Downloads:4Uploads:2 Thanks: 2 Thanked: 2 times in 1 posts]

#203853

First of all: Thank you for this outstanding template! After a long search for a new template for my site, I am glad I’ve found purity III.

I want to use the off-canvas-sidebar for the menu in mobile view. In order to reduce scrolling I’d like to eliminate the white space above the off-canvas-header (see pic, it is the top right corner) and move the header to the very top of the off-canvas-sidebar. I’d love to see the content be lifted as well, so the menu would be displayed on mobiles without too much scrolling.

(Alternatively I could imagine to leave the header where it is, and move the piano-pic inside the empty space. Since it is the site-logo, it would make sense to have it displayed topmost. But I’d prefer the above solution.)

I can’t figure out, which part of off-canvas.css or off-canvas.less or what ever .css I should change. Inserting negative pixel-values for positions did not effect anything. I also tried eradicating the whole off-canvas-header in off-canvas.php, but that just leaves users with a missing “close”-x-button and does not look that much inviting.

Has anybody an idea how to accomplish this?

Thank you.

---

Attachments:

1. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#559849

Hi @bascop,

Could you please provide your site url so I can have a look first ?

[bascop Friend bascopJoin date: February 2015Posts: 9Downloads:4Uploads:2 Thanks: 2 Thanked: 2 times in 1 posts]

#559926

Hi, @adam M,

thanks! My site is still under construction, but let me see, I’ll publish it…
Here’s my site url:
http://www.bastiankopp.com/
See the empty vertical space above the off-canvas-title saying “Willkommen”? I’d like to get rid of that/use it for the sidebar-title. I’ve seen purity III pages where the whole sidebar is filled with content. And even the purity III-Demo shows a menu in this position, so I guess, there must be some solution to that.

Thank you for having a look!

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#560000

Hi @bascop,

Please open file http://www.bastiankopp.com/templates/purity_iii/css/custom.css then add this code :

#t3-off-canvas {
top: -55px !important;
}

[bascop Friend bascopJoin date: February 2015Posts: 9Downloads:4Uploads:2 Thanks: 2 Thanked: 2 times in 1 posts]

#560003

Ah, this one works just the way I wanted!
I thought, that I had already tried that one, but I had forgotten to add “!important”.
Important for me, to keep that in mind.

Thank you very, very much, Adam!

[bascop Friend bascopJoin date: February 2015Posts: 9Downloads:4Uploads:2 Thanks: 2 Thanked: 2 times in 1 posts]

#560059

An interesting thing that doesn’t bother me much. But maybe it’s interesting for you to know:
The vertical distance of the off-canvas header to the top seems to change with the off-canvas-effect I choose. I changed the effect to “Slide along” and now the off-canvas-header disappeared as well – which must be the following 55px that are cut off.

I tested some effects:
“Slide in on top”: Header gone
“Reveal”: Header gone
“Push”: Header back again
“Slide along”: Header gone
“Reverse slide out”: Header gone
“Rotate pusher”: Header gone
“3D rotate in”: Header back again
…
(I’ll go through the other effects, If wanted)

So I either may have a slightly corrupt installation – or there might be an inconsistency in the code that causes different absolute positions. I don’t know if this is new for you. If you need more information, just let me know.

---

Attachments:

1. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#560098

Hi @bascop,

In this case, please choose appropriate effect you want and add / remove the custom CSS code if needed.

[bascop Friend bascopJoin date: February 2015Posts: 9Downloads:4Uploads:2 Thanks: 2 Thanked: 2 times in 1 posts]

#560234

Yes, Adam. I find it even more beautiful without the off-canvas-header, because it lifts the menu. And, thanks to you, I know now how to change the values properly.

I think it points to an underlying issue with the positioning of items in the off-canvas-sidebar. And it seems to depend on the off-canvas-effect you use. E.g. compare effect “Reveal” to “Push” – and you get a vertical difference of 55 px.

I am happy with the way it is now. And I know how to cope with it, when I want to change the off-canvas-effect. But – if somebody else can reproduce this – maybe the developers want to change it in future versions of this great template.

Thank you.

[Author]

Posts