One-page site content not showing up

• nxtthomas

  said

  Hi,
  I’m setting up a one page test website.
  I created a new page (HomePage), a layout and a header, together with a slider.
  On this homepage, I added a RAW html section with the div id, and used the same id in the menu.
  The problem is that the page only shows the header (slider) with the menu on the left.
  Scrolling down to show the page content doesn’t work, and a click on the menu doesn’t work either … So actually I can’t see the content of the page!
  What am I missing?
  Could I pm you an admin login/password?

  Thanks,
  Thomas

• nxtthomas

  said

  Just found some clues:
  I adjusted the padding setting of the first RAW HTML section, and now the content appears. I used the same padding as in the resort demo page.
  Could you explain a bit about this padding thing? I mean, how can I figure out this will help showing the content?

  So far so good, but now when scrolling down from the slider, and showing the content, the left menu background changes from a blank background to a demo image background… where could this come from?

• andy

  said

  It sounds like you need more content on the page. If the page lenght isn’t long enough to get in a “full scroll” it won’t go far enough to completely fade out and remove the slide show. I would add some blank lines or returns to make the page longer and try that.

  I think it would be good for me to add a check in the theme to test the page height for any page using a full screen slide show and if the page is not large enough force a minimum height CSS value on the content area to prevent this from happening. I’ll look at that now.

• nxtthomas

  said

  Thanks for your answer.
  About the menu background? Why (and how) is it different when switching from the header/slider view to the content view?

• andy

  said

  The background image of the masthead is made invisible when you are viewing the full screen slideshow then fades in as you scroll. Check the specific header assigned to that page for an image background assignment. If you don’t see one it must be the default image in the Theme Options. You can remove the default in Theme Options or in the Layout header enter the text ‘none’ into the background image field to clear a default. The image is set somewhere so we need to find that setting.

• nxtthomas

  said

  Thanks. Emptying the file field in the masthead section (appearance – customize) did the trick.
  One more question : how can I remove the masthead on the full screen slideshow ? I’d like to see it only after scrolling down.

• andy

  said

  Ahhh!! Yes, we made a design decision to have the horizontal masthead visible, but I think with a little CSS trickery we can do what you’re wanting. Let me quickly test something and get right back to you. I’m guessing that you are using the fixed masthead option to keep it visible when scrolling, correct?

• andy

  said

  Here are a couple of different things you can do with the horizontal masthead with a full screen slide show. These features rely on a helper class, hasSlideShow inserted by the theme, but only for slide shows with a Slider Layout set to “Full Screen” and the setting for “Force Full Width” set to “Off“.

  That last bit is very important. The theme uses the “Force Full Width” setting of “Yes” to know it should not apply the special scrolling behavior (fading out slider and overlapping of the masthead). What you are wanting to do needs the masthead to overlap the slide show so make sure the setting is “Off“.

  Once you have the slide show setup this way, and you can see the full screen slide show and your horizontal masthead at the top of the screen, here are a couple of tricks you can use to achieve some nice effects with the masthead. These CSS values below can be entered directly into the “Appearance > Theme Options” area using the “Custom CSS” field.

  Create a semi-transparent masthead overlaying the slide show:

  #masthead .fullSlider.hasSlideShow { background-color: rgba(255, 255, 255, 0.6) !important; }

  Hide the masthead, menu, etc when viewing the slide show:

  #masthead .fullSlider.hasSlideShow { display: none !important; }

  That’s the idea, now you can experiment with all kinds of different effects and styling to get the result you’re wanting. If you are using a background image in the slide show you may need to do some different things to achieve a semi-transparent menu, but you’ll be able to see these things as you test.

• nxtthomas

  said

  thanks for the detailed replies.
  i’ll look at them and let you know the result!