Start menu at 2nd slide (after full page image)

Permalink Browser Info Environment
Hi,

is it possible to hide the menu on the first page/slide with a fullscreen image. And then, when scrolling down, the menu appears at the top of the second slide?

Like here for example:http://themes.semicolonweb.com/html/canvas/index-onepage.php...

Type: Pre-Sale
Status: In Progress
View Replies:
jordif replied on at Permalink Reply
jordif
Hi,

this is not possible out of the box, it would require some tweaking.

However you could achieve something similar using the affix plugin included in Bootstrap (the theme is based on bootstrap 3).

I've created a quick demo, hopefully it works for you:

http://longstoryshort.15robots.com/menu-second-slide...

To achieve this, you only need to add an HTML block to the fist slide so you can include the code to initialize the affix plugin. The HTML block will only contain the javascript code, so it will be invisible. This is the code I've used:

<script>
$( window ).load(function() {
    if (!$('html').hasClass('editing')) {
        $('.site-header').affix({
              offset: {
                top: function () { 
                  if ( $('html').hasClass('ccm-toolbar-visible') ) {
                    return $('#slide2').offset().top - 59
                  } else {
                    return $('#slide2').offset().top - 10
                  }
                }
              }
        });
    }



I think this could be useful for other users, so I will consider adding this as an option in future releases.

Hope this helps,

Jordi
grafoman replied on at Permalink Reply
Very nice! This works. Thank you
byvictoria replied on at Permalink Reply
byvictoria
Hi @jordif,

Is it too difficult to get the classic sticky navbar, where the navbar doesn't show on slide1 but on top of slide2, and it sticks to the top upon scrolling?

This one works nice but it feels kind of clumsy considering that it goes "against the stream".

Thank you,

V.
jordif replied on at Permalink Reply
jordif
Hi V,

you see, this is not how the theme works out of the box, so we're tweaking things a little.

I think the only way to achieve what you want is not using the default navbar (which is already fixed at the top). Instead, we can hide the default navbar and add our custom navbar directly to the second slide.

I've created a quick demo:

http://longstoryshort.15robots.com/menu-second-slide-alt...


These are the steps I've taken:

1. Add a layout at the beginning of the second slide. This will be our custom navbar. My layout has 2 columns (one for the site name and one for the slides nav block).

2. Select "Edit Layout Design" and enter the following custom class: site-header

3. Add a "Slide Nav" block to the second column.

4. Click on th "Slide Nav" block, select Design & Custom Template, and enter the following custom class: navbar-right

5. Finally add an HTML block to your page and paste the following code:

<script>
$( window ).load(function() {
    if (!$('html').hasClass('editing')) {
        $('#slide2 .site-header').affix({
              offset: {
                top: function () { 
                  if ( $('html').hasClass('ccm-toolbar-visible') ) {
                    return $('#slide2').offset().top - 59
                  } else {
                    return $('#slide2').offset().top - 10
                  }
                }
              }
        });
    }


I haven't tested this thoroughly, but it seems to be working fine.

Hope this helps,

Jordi
byvictoria replied on at Permalink Reply
byvictoria
That worked EXACTLY as I wanted, thank you @jordif... For the record, you would need to add a couple of more lines of code to turn the navbar into cellphone mode for small screens, but I didn't care because of the functionality of my page, I put the navbar invisible for small devices and left only the logo in the header, which links you back to home. It looks very nice, thank you...

There is also an issue I have been trying to solve for a long time. The background image kind of blinks upon page load. I mean when you go to the main page, it shows up crisp for a while, and when the website ends up loading, it kind of rezises and it looks a little blurry. I was wondering if there wasn't any redundant code related to image background size that causes the blinking and blur.

Thank you again,

V.
jordif replied on at Permalink Reply
jordif
Hi,

the background parallax is initialized on page load, that may cause background images to resize.

There are several things you could try:

A) In the "Area Design" dialog, where you choose the background image, you can also set the background size and position (if you're using concrete 5.7.5.4 or above). Try setting the size to "Cover" and the position to "Center Top".

B) You can try using the "Parallax enabled via JS" option (instead of "parallax enabled via CSS").

C) You can add a preloader to the page, so it fades in once it's fully loaded. You can find a demo with sample code here:

http://longstoryshort.15robots.com/preloader...


Regards,

Jordi
byvictoria replied on at Permalink Reply
byvictoria
Thank you @Jordif,

I got it, this is what I did:
1. Paralax through javascript (that stopped the blinking).
2. Background image 100% size, CENTER-TOP position (that stopped the blur).

Your loading code demo looks great, should I add an html block with that code to implement in my site?
jordif replied on at Permalink Reply
jordif
Hi!

I'd recommend using "cover" for the background size. If you leave "100%", make sure the background looks ok on different devices and background sizes.

As for the preloader, yes you only need to add an HTML block with the code.

Regards,

Jordi
grafoman replied on at Permalink Reply
Hey Jordi,

I have a similar problem for the slidenav element on this page:http://grafomantestsite.be/current/basel...

When you scroll down, the slide nav ("about exhibition, view images, video, artist info, press") has to stick to the top of the page. That way you can easily navigate to the slides in the pages without going back to the top all the time.

Thanks in advance.
jordif replied on at Permalink Reply
jordif
Hi,

I guess you should be able to use the solution posted above. As you've already added a block for the navigation with the class "exhibition-menu", you'll need to adjust the code:

<script>
$( window ).load(function() {
    if (!$('html').hasClass('editing')) {
        $('.exhibition-menu .navbar-nav').affix({
              offset: {
                top: function () { 
                  if ( $('html').hasClass('ccm-toolbar-visible') ) {
                    return $('.exhibition-menu').offset().top - 59
                  } else {
                    return $('.exhibition-menu').offset().top - 10
                  }
                }
              }
        });
    }


You'll also need to adjust the styles for the navigation (probably add a background).

Hope this helps!

Jordi
grafoman replied on at Permalink Reply
Did not know it was going to be that easy...
I like to overcomplicate things.

Thanks !

concrete5 Environment Information

Unable to load environment info

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.