Help me out! Arrow @ header

Hi I had a question, I want exactly the same thing as arrow that bergner did on his example website http://bergner.org/moesia/

I already waisted 4 hours trying to put it on there but I failed!

I replied on a topic before to ask help, but I think this might attract more attention. So please take a look at my post @ https://athemes.com/forums/topic/confusion-re-site-layout/

Could someone help me out with it? Thank you in advance.

Akash

Hey,

Well, that’s why it’s always better to open your own topic if you have questions.

Would like to help but you need to post a link to your website so I can see the issue and also explain how far you’ve got and what is not working.

Ah ok! My website is www.beastcamp.nl/ (I will take the construction mode off right now)

I asked you to also let me know where did you get stuck. At the moment I’m not seeing the code in your source, so I’m guessing you didn’t add it.

Ah sorry, I deleted it and just overwrited the old style.css and header.php back because I gave up.

I will do it again… On the bottom of the style.css I pasted

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;</blockquote>
}

under the <?php tha_header_bottom(); ?>
and added above the </header><!– #masthead –> that was at line 104 or so… the code:

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

than I uploaded it on my filezilla to the theme and now again… no arrow appears.

Well, the link goes outside the . Also, why did you remove the class from the link?

Huh don’t know why i posted it without the class…

The code is:

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

What do you mean by The link goes outside the
.

I meant you should have placed it outside the header :slight_smile:
Send an admin account for me please at vlad[at]athemes.com so I can move it for you if you can’t figure it out. It’s late and I don’t have too much time left to guide you through this.

Edit: now I noticed that the forum stripped what I wrote. It was <header>…</header>

You got mail ;)!

One more thing if it is not too much work!! If I click on the login button (that I linked to #site-navigation it bounces… Then if I immidiatly want to scroll the page trips) is it also possible to solve that in a quick fix?

Ok, the arrow is added. Make sure you create a child theme and copy the header.php. Otherwise you’ll just lose the changes when you update the theme.

I don’t really know where that issue comes from. Try disabling some plugins, maybe that one with the floating icons.

The arrow is gone, I clicked update XD Oops… It’s just the image I think. Because the circle around the png stays?

It’s not gone, you’re hotlinking it from a different site. Download it and upload it to your media library. Then update the link.

alright, THANKSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS!!! Have a great day. :slight_smile: Made my day.

I see you found the plugin that was causing the issue. Which one was it?

Hmm I already deleted it… It was something like: Smooth easing slider

Hi Vlad, just like the guy in the other topic I now got the same issue… The arrow is showing up on every page. What do I have to add to the theme, if I only wants it on the homepage.

Make sure the header.php change is wrapped in:

<?php if ( is_front_page() || get_theme_mod('moesia_banner') != 1 ) : ?>
   <display scroll arrow code>
 <?php endif; ?>