Monitor Reply

Support

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

Permalink Browser Info Environment May 18, 2015 at 9:59 AM

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

jordif replied on May 19, 2015 at 4:16 am Permalink Reply

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
                  }
                }
              }
        });
    }

Viewing 15 lines of 29 lines. View entire code block.

 
<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
                  }
                }
              }
        });
    }
});
</script>
<style>
.site-header {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    -webkit-transition: transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
}
.site-header.affix {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
</style>

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 May 21, 2015 at 8:13 am Permalink Reply

Very nice! This works. Thank you

byvictoria replied on Feb 6, 2016 at 4:16 pm Permalink Reply

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 Feb 7, 2016 at 5:28 am Permalink Reply

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
                  }
                }
              }
        });
    }

Viewing 15 lines of 40 lines. View entire code block.

 
<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
                  }
                }
              }
        });
    }
});
</script>
<style>
.site-header.navbar-fixed-top {
    display:none;
}
#slide2 .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 800;
}
.editing #slide2 .site-header {
    position: static !important;
}
#slide2 .site-header.affix {
    position:fixed;
    top: 0px;
}
.ccm-toolbar-visible #slide2 .site-header.affix {
    position:fixed;
    top: 48px;
}
</style>

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

Hope this helps,

Jordi

byvictoria replied on Feb 7, 2016 at 6:30 pm Permalink Reply

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 Feb 8, 2016 at 2:11 pm Permalink Reply

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 Feb 8, 2016 at 3:30 pm Permalink Reply

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 Feb 8, 2016 at 4:15 pm Permalink Reply

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 Mar 3, 2016 at 10:29 am 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 Mar 3, 2016 at 3:02 pm Permalink Reply

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
                  }
                }
              }
        });
    }

Viewing 15 lines of 33 lines. View entire code block.

 
<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
                  }
                }
              }
        });
    }
});
</script>
<style>
.exhibition-menu {
   height: 95px;
}
.exhibition-menu .navbar-nav.affix {
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
   z-index: 800;
}
.ccm-toolbar-visible .exhibition-menu .navbar-nav.affix {
    position:fixed;
    top: 48px;
}
</style>

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

Hope this helps!

Jordi

grafoman replied on Mar 4, 2016 at 3:28 am Permalink Reply

Did not know it was going to be that easy...
I like to overcomplicate things.

Thanks !

Long Story Short

Support

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

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post