Joomla Templates Club 406,261 posts

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#978810

Hi Piotr,

As I can see that the logo still keeps visible when scrolling down the site now: http://wydawnictwdy.nazwa.pl/wschodtv3/index.php/pl/

Did you get it solved?

[WS Friend WSJoin date: July 2010Posts: 56Downloads:24Uploads:11 Thanks: 2]

#978813

Hi Saguaros,
The logo is still visible. But if you scroll down the page, it gradually disappears and then suddenly pops up again. It doesn’t look good. I’d like to have the same efect as it is in JA Magz II teplate (http://ja-magz-ii.demo.joomlart.com/index.php/en/) – when you scroll down, the logo scales down to a certain size.
Could you advise me how to get this effect, please?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#978983

You can try with this css for effect:

.t3-mainnav.affix .customlogo img {
    transform: scale(0.7);
    transition: all 500ms ease 0s;
}

[WS Friend WSJoin date: July 2010Posts: 56Downloads:24Uploads:11 Thanks: 2]

#979096

Hi Saguaros,
The logo indeed scales down – thanks.
However, during scrolling down, the logo module first hides behind of the browser’s window edge, then suddenly pops up again, and finally scales down. Could you inform me how to:

1. Keep the logo module still visible (like the top menu) despite scroling down the webpage.
2. Scale down not only the logo but also the whole module to make more room after scroling down.

I’d like to have similar effect to JA Magz II template header.

Piotr

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#979521

Try to add this css rule:

.t3-mainnav {
  position: fixed;
  width: 100%;
}

[WS Friend WSJoin date: July 2010Posts: 56Downloads:24Uploads:11 Thanks: 2]

#979638

Hi Saguaros,
Thank you for the code. Ufortunately, the top menu covers content of the website. I see, it may be difficult to program scaling effect.

Could you advise me how to aviod poping up the logo after scroling down. I’d like it to behave like top-1 and top-2 possitions – after scroling down, it is no loger visible.

[WS Friend WSJoin date: July 2010Posts: 56Downloads:24Uploads:11 Thanks: 2]

#979645

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#979956

Upon your screenshot, you want to keep the main menu only when scrolling down, is that right?

[WS Friend WSJoin date: July 2010Posts: 56Downloads:24Uploads:11 Thanks: 2]

#980015

Yes, exactly.
There are added new positions (undertop-1 and undertop-2). I want them to behave like top-1 position – after scrolling down it dissapears behind browser’s edge.
Only main menu stays visible.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#980072

You should tell me this from the start of topic. You said to have same feature like JA Magz II now you don’t want to show the logo when scrolling.

Anyway, if you want to achieve that, you can create a new block and move the code for the new position (in above post) to this new block. Then when you scroll down, the main navigation will be sticky, not include the logo in new position.

For more info about block, pls check out documentation here: http://www.t3-framework.org/documentation/bs3-layout-system#define-block

[WS Friend WSJoin date: July 2010Posts: 56Downloads:24Uploads:11 Thanks: 2]

#980081

Hi Saguaros,

I’m sorry for changigng my mind, but this solution didn’t look good on a mobile devices mainly due to reducing space for the content.

I edited /templates/ja_magz/tpls/default.php and added a new block:

<?php $this->loadBlock ('undertop') ?>

Then I created a new file /templates/ja_magz/tpls/blocks/undertop.php

Unfortunatelly I’m having a problem with filling it with mentioned code. Could you give me a hand and guide me what to do next? Maybe I could use an existing file and copy it with applying modifications?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#980435

I just helped you to edit 2 files:
/templates/ja_magz/local/tpls/blocks/header.php
/templates/ja_magz/local/tpls/blocks/undertop.php

Also attach these 2 files here so you can have a look.

---

Attachments:

1. topheader.zip

[WS Friend WSJoin date: July 2010Posts: 56Downloads:24Uploads:11 Thanks: 2]

#980504

Hi Saguaros,
Thak you very much for the update. The new block hides now correctly. 🙂

I’m trying now to diable undertop-1 and undertop-2 positions in mobile, responsive template version. Unfortunately the changes don’t save.

[WS Friend WSJoin date: July 2010Posts: 56Downloads:24Uploads:11 Thanks: 2]

#980512

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#980796

This template is built with Bootstrap so if you want to hide element in specific screen, you can use these pre-defined classes:
.hidden-phone
.hidden-tablet
.hidden-desktop

I added for you, you can have a look now.

[Author]

Posts