Confusion re site layout

Hello,

Some visitors to my site reported getting stuck on the front page, as they did not realize they should scroll down. Is there any elegant way to give visitors a hint as to the need to scroll down? Or, perhaps, to move the main navigation to the top of the header image?

Further to the above, just tried adding please scroll down to enter the site in the text for the call to action button but it does not seem to show up - probably because there is no button as such.

Well, yeah, you also need to add a link for the button to show up. You can write Click to scroll down and add #site-navigation in the URL field.

Thanks!

Hi Vlad,

I think the latest Moesia 1.17 update caused a problem with the scrolling.
I added the #site-navigation URL to the call to action button on my test site http://bergner.org/moesia/ and we do scroll down, but not all of the way so that the nav bar is at the top of the window.

The following change seems to be causing the problems, because if I modify the test of the window width so that we don’t execute it (ie, set 1024 to 10000), then it scrolls to the correct location.

@@ -106,7 +108,16 @@ jQuery(function($) {
$(‘a[href*=#]:not([href=#])’).click(function() {
if (location.pathname.replace(/^//,’’) == this.pathname.replace(/^//,’’) && location.hostname == this.hostname) {
var target = $(this.hash);

  •                   var topbar = $('.top-bar').height();
                      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    
  •                   if ( $(window).width() > 1024 ) {
    
  •                           if (target.length) {
    
  •                           $('html,body').animate({
    
  •                           scrollTop: target.offset().top - topbar + 40
    
  •                           }, 800);
    
  •                           return false;
    
  •                           }
    
  •                   } else {
                      if (target.length) {
                      $('html,body').animate({
                      scrollTop: target.offset().top

Hello,

It actually solved a problem :slight_smile:

The nav bar has position: fixed; when scrolling past it so it doesn’t take space in the document. Therefore, if you click a menu link to scroll to a section, the nav bar would have covered the title of that section. Now there is an offset equal to its height so it doesn’t cover it anymore.

It might be less convenient for people who were targeting #site-navigation, but it’s better now for your actual sections.

Hi Vlad, sorry for taking a while to reply, but vacations and… :slight_smile:

Anyway, how about if we only apply the modified offset if we’re not trying to scroll to #site-navigation? Like the following change?

  • if ( $(window).width() > 1024 ) {
  • if ( this.hash != “#site-navigation” && $(window).width() > 1024 ) {

I ask, because my wife wants a scroll marker/arrow added to her test site (on a localhost at the moment), that scrolls to #site-navigation and I’d rather not fix this is in a child theme if we can make this work for all of the #foo links in the moesia theme. As an FYI, I have added what she wants to do to:

http://bergner.org/moesia/

With the change above made to moesia/js/scripts.js, clicking on either the “Scroll to #services” button or the “scroll arrow”, they both scroll to the correct location.

Yeap, that’s a good idea, I’ll add it to the next version. Thanks.

I didn’t bothered with this because I kind of liked how it was showing a bit of the header image too when you scrolled to #site-navigation, it gave like a continuity feeling. But I guess more people would appreciate scrolling the nav bar straight to the top.

That’s great, thanks!

Hi Vlad, bought the moesia pro after trying the moesia free as it is such a great theme!
re the http://bergner.org/moesia/ can you please tell me how to install the scroll-arrow on the bottom of the start page. that s just what i ve been looking for…
thanks a lot

Hello,

That arrow is custom built by Bergner inside a child theme. It’s not hard to do. But there is an easy way to add an arrow inside the call to action from the welcome area with some custom CSS. Would you like to do that?

hi, well i would like the call to action to lead to a specific article and the arrow at the bottom to start the scroll (so that people understand that the front page is continuing). in this way they can choose between 2 options. i use the child theme, so if you could tell me how to insert this scroll arrow it would be super.
i guess i have to include the png file in the image folder, but then??
thanks again

Well, hopefully Bergner won’t mind if you use the same arrow :slight_smile:

You need to copy the header.php file from the main theme to the child. After that edit it and add this (and edit the image path) right above line 108 (above the last block of code):
<a href="#site-navigation" class=“scroll-arrow”><img src=“path/to/image.png”></a>
Then add this to your child theme’s style.css:


a.scroll-arrow {
  color: white;
  font-size: 1.2em;
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -25px;
  padding: 10px;
  width: 50px;
  height: 50px;
  font-weight: bold;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
  border: 3px solid white;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  z-index: 999999;
}
a.scroll-arrow:hover {
  text-decoration: none;
  bottom: 25px;
}

thanks a lot… followed these steps but the arrow is not to be seen

  1. copied header.php to child
  2. created an image file at the child theme
    3 uploaded the down-arrow.png in this image file
  3. edited the header php - the lines look like this now:
    <?php tha_header_bottom(); ?>

    </header><!-- #masthead -->
  4. added the above css to the child css

but the arrow is not to be seen on the frontpage…
(i also tried to upload the down-arrow.png to the media library and to enter this image path…)

sorry, must just be some little detail…

<a href="#site-navigation" class="scroll-arrow"><img src="http://aloismosbacher.at/wp-content/themes/moesia-pro-child/images/down-arrow.png"></a>


this line just above </header><!– #masthead –>

The link doesn’t show up at all in your code. If you want you can send an admin account for me at vlad[at]athemes.com and I can have a quick look.

cool…
sent you the admin details

Alright, it’s done. You placed the link in the wrong place.

but i can still not see the arrow on the frontpage?.. and also i cant see a change in the header php. where did you put the link?

I did change it and I saw the arrow on the front page. I did it again now. You sure you haven’t changed it back or something.