Navigation arrows on site

• 

  livlev · Member · Mar 31, 2015 at 7:29 pm

  • Copy link
  • Add topic to favorites

  Hello,

  Is it possible to create a ‘swipe’ action on my site for ipad and mobile? So when people use their hands to swipe to the next post.
  At the moment i have got rid of the navigational arrows.

  If this is not possible, is it possible to put an image on top of the current navigational arrows so I can design my own version?

  Thank you very much in advance?

  Olivia

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 1, 2015 at 2:02 pm

  • Copy link

  Is it possible to create a ‘swipe’ action on my site for ipad and mobile? So when people use their hands to swipe to the next post.

  No, that would require code that isn’t allowed here at WordPress.com at this time.

  If this is not possible, is it possible to put an image on top of the current navigational arrows so I can design my own version?

  Yes, this is possible. Do you have one of your images ready and uploaded so I can work with it? If the image fits in the space of the existing circle, this may be a very easy and quick change.

• 

  livlev · Member · Apr 1, 2015 at 2:27 pm

  • Copy link

  1) Sure, thanks.
  The images are here:
  https://livlev.files.wordpress.com/2015/04/arrow-right.png
  https://livlev.files.wordpress.com/2015/04/arrow-left.png

  I didn’t know the size of the existing circle so let me know if these are not right?

  2) Also, at the moment, even when the navigational arrows are switched on, they appear on mobile but do not seem to work. Why is this?

  3) When using the arrows on tablet and desktop, i would like to make sure that the left arrow sits below and to the right of the ‘liv’, and above the ‘lev’ so it only works alongside the l in the middle.

  4) Is it possible to swap the arrow navigation around? At the moment, the right arrow seems to go to the post to the left on the homepage.

  5) Finally, I have been designing my site on a 13 inch monitor. When looking on my screen all the images/posts look good quality. How do i ensure they stay this quality on a larger screen?

  Thanks

• 

  thesacredpath · Member · Apr 3, 2015 at 12:47 am

  • Copy link

  Your image looks pretty good. Here is the arrow on the right, the next arrow. You can use that as a guide to create the previous. I’ve set things so that when someone hovers over it, it turns darker.

  .site-content #nav-below .nav-next a::before, .site-content #image-navigation .nav-next a::before {
      content: url("https://livlev.files.wordpress.com/2015/04/arrow-right.png");
      background: #888;
  }
  .site-content #nav-below .nav-previous a, .site-content #nav-below .nav-next a {
      opacity: 0.3;
  }
  .site-content #nav-below .nav-next a:hover:before, .site-content #image-navigation .nav-next a:hover:before {
      opacity: 0.9;
  }

  2) Also, at the moment, even when the navigational arrows are switched on, they appear on mobile but do not seem to work. Why is this?

  It is the height of the footer that is causing the issue. Add the following at the end of your CSS to set the footer back to its normal height.

  @media screen and (max-width: 600px) {
  .site-footer {
  height: initial;
  }
  }

  3) When using the arrows on tablet and desktop, i would like to make sure that the left arrow sits below and to the right of the ‘liv’, and above the ‘lev’ so it only works alongside the l in the middle.

  .site-content #nav-below .nav-previous a::before {
      left: 20px;
  }

  4) Is it possible to swap the arrow navigation around? At the moment, the right arrow seems to go to the post to the left on the homepage.

  Sorry, no, that would be problematic.

  5) Finally, I have been designing my site on a 13 inch monitor. When looking on my screen all the images/posts look good quality. How do i ensure they stay this quality on a larger screen?

  Everything looks good on my system, clear out to a browser window width of 2000px, so I don’t think you have any worries in that regard.