2 replies [Last post]
handymanny
handymanny's picture
Offline
newbie
Last seen: 5 years 27 weeks ago
Joined: 2014-12-05
Posts: 3
Points: 6

Hi,

I've created a Contact Button (as a sprite png for my WordPress site) at http://richardhaggerty.co.uk/. It's the large orange image in the header (above "Confidence"). I want that to be my main call to action:

What I would ideally like to do is have the button FIXED, so when I scroll down the page, it remains there for the user to access - always visible.

I'm having difficulty doing that:

When I change this part of the css from

.container-inner #contactButton {
position: absolute;
left: 875px;
top: 0;
}

TO

.container-inner #contactButton {
position: fixed;
left: 875px;
top: 0;
}

....The button disappears...Not sure if I have set the "relative" property properly elsewhere?!

(One other thing: As it, it works in Chrome and Firefox, but it won't work on IE9 or below (the button disappears). Wondering if anyone has a css workaround for IE9 that I could use.)

This is the full css I've used:

/* Add the NEW ORANGE contact button - HTML code added to Header.php in Editor */
.container-inner {
position: relative;
}

.container-inner #contactButton {
position: absolute;
left: 875px;
top: 0;
}

#contactButton a {
height: 50px;
width: 172px;
display: block;
text-decoration: none;
background: url(http://richardhaggerty.co.uk/wp-content/uploads/2014/07/contact-button-hypnotherapy-cardiff.png) 0 0;
border: none;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
transition: all 0 ease;
}

#contactButton a:hover {
background-position: 0 -50px;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
transition: all 0 ease;
}

/*Transition prevents rolling effect*/
/*Site Name Color*/
.site-title a {
color: #666;
display: block;
max-width: 100%;
}

Thank you!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 8 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Try position:fixed on the

Try position:fixed on the a.

#contactButton a{
position:fixed;
}

handymanny
handymanny's picture
Offline
newbie
Last seen: 5 years 27 weeks ago
Joined: 2014-12-05
Posts: 3
Points: 6

Thanks

Thanks Tony,

Couldn't get it to work yet.

Will carry on looking!

Richard