0

I've added the following to my WP site. The CSS went in my themes's Advanced > Custom CSS section. The HTML went in my footer.php just above the /body tag.

When I put the whole thing in jsfiddle then it works. But on my WP site I just get a text "CONTACT US" in the bottom left corner of the page. No formatting, doesn't float etc.

When I check the page source I see all the CSS has loaded. I've cleared all the caches and tried incognito windows.

HTML

<div id="ds-sticky-button"> <a href="/about-us/#contact">CONTACT US</a></div>

CSS

#ds-sticky-button {
position: fixed;
right: -50px !important; /*Positions the button to the right of the page*/
bottom: 0; /*Sets the distance of the button from the bottom of page*/
width: 200px !important; /*Sets dimensions of the button*/
height: 25px !important; /*Sets dimensions of the button*/
z-index:99999; /*Keeps the button on top*/
}
/*Styles the link text to make it look like a button - You can edit all these values to match your design*/
#ds-sticky-button a {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  border: 1px solid #fff;
  color: #ffffff;
  font-size: 16px;
  background: #ff6600;
  padding: 5px 15px 5px 15px;
  text-decoration: none;
}
/*Styles the button on hover - You can edit all these values to match your design*/
#ds-sticky-button a:hover {
  background: #000000;
  text-decoration: none;
}
  • Use Chrome DevTools inspector to ensure that all your button markup is there, and examine the rules which are being applied to the element. If it lists your rules and they are crossed out, then other rules applied after your CSS are overwriting them. If your button markup is indeed displayed in full and your CSS is displayed in a <style> element or your stylesheet linked with a <link> element, then this is actually a generic CSS/HTML question, and may be off topic for our site. You could help to make this distinction by adding the relevant parts of the code you are using. – bosco Mar 29 '17 at 0:17
0

It might be a syntax error inside your custom CSS section. Try pasting the whole CSS code (not just the snippet above) to a code editor which can give you hints as to what the error might be - if there is one.
Or it could also be an HTML syntax error - you could check your page's source code for missing closing tags or other similar errors that could lead to the page not displaying properly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.