Change welcome button style

Hello,

I would like to change the welcome button style by a round button (with a bottom arrow inside) and put it at the bottom of the screen.

Somebody can help ?

Thank you very much :slight_smile: Seb

Hi,

Do you have already added a button? so only the style of it have to be changed? Please post a link to your website, so we can check.

Best Regards,
Csaba

Hi Csaba,

I haven’t add button ! I was thinking to use the default button !

http://frantzimages.fr/

Thank you :slight_smile:

Hi,

Yes, I know I mean it was added on your site, because I don’t see it.

Best Regards,
Csaba

Hello,

I’ve enabled the button now :slight_smile:

Thank you ! Seb

Hi Seb, you said:
> I would like to change the welcome button style by a round button
> (with a bottom arrow inside) and put it at the bottom of the screen.

My wife’s site has exactly this: www.kamiliconsulting.com

To add the above scroll arrow, just install and activate the Moesia Above Header widget extension from: https://athemes.com/moesia-extensions/

Then go to “Appearance -> Customize -> Moesia Extensions -> Above header extension” and click on the “Show widget area on front page?” check box.

Then go to “Appearance -> Widgets” and add a text widget to the “Above Header” widget area and paste the following code there:

<a id="scroll-arrow" href="#site-navigation"><i class="fa fa-chevron-circle-down fa-3x"></i></a>

Finally, add the following css using a custom css plugin or to your child theme’s style.css file. Change the color and opacity to your liking. I hope this helps.

/* Remove the padding added by the "Above Header" extension.  */
.ah-widget-area .widget {
  padding: 0 !important;
}

@media screen and (min-width: 1025px) {
  /* Add a scroll arrow for large screens.  */
  #scroll-arrow {
    opacity: 0.5;
    color: white;
    position: absolute;
    bottom: 30px;
    left: 50%;
    margin-left: -25px;
    z-index: 999999;
  }

  #scroll-arrow:hover {
    text-decoration: none;
    bottom: 25px;
  }
}

/* Disable the scroll arrow for small screens.  */
@media only screen and (max-width: 1024px) {
  #scroll-arrow,
  #scroll-arrow:hover {
    display: none;
    visibility: hidden;
  }
}

Hello Bergner,

Just one word : PERFECT !!! Many many thanks ! EXACTLY what i want :slight_smile:

Seb !

Hi Seb,

Avec plaisir! I saw your request and noticed that the old button in the middle of your site distracted from your beautiful background image…as it did on my wife’s site, so thought I’d show you how we added what I think is a little less intrusive scroll button. I’m glad you like it.

Peter

I used this for a site:

But on mobile it shows a BIG arrow below the burger menu on the front page… Anyone know how to get rid of this?

I used the exact code from above.

@media screen and (min-width: 1025px) {
/* Add a scroll arrow for large screens. */
#scroll-arrow {
opacity: 0.5;
color: white;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -25px;
z-index: 999999;
}

#scroll-arrow:hover {
text-decoration: none;
bottom: 25px;
}
}

/* Disable the scroll arrow for small screens. */
@media only screen and (max-width: 1024px) {
#scroll-arrow,
#scroll-arrow:hover {
display: none;
visibility: hidden;
}
}

Actually it moves the arrow down below the header menu in Safari (OS X) and Chrome (OS X) too. And shows it really BIG!
It’s placed right in Firefox.

Sorry to spam the thread.

It seemed to be a cache issue. Problem solved.

Hi,

Great! I’m glad it’s resolved! If you need help with anything else, please open a new topic.

Have a nice day!

Best Regards,
Csaba