Jump to content

Jeffo79

Members
  • Posts

    1
  • Joined

  • Last visited

Everything posted by Jeffo79

  1. Jeffo79

    icon var

    Hi, I am a bit of a novice at coding, but I am creating an icon bar what sit in a standalone section on a page, problem is the backgroun colour of my icon bar is overtaking over parts of the page. Is there away of stopping this happening? Code below <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body {margin:0;} .icon-bar { width: 100%; background-color: #555; overflow: auto; } .icon-bar a { float: left; width: 20%; text-align: center; padding: 12px 0; transition: all 0.3s ease; color: white; font-size: 36px; } .icon-bar a:hover { background-color: #96B422; } .active { background-color: #C45791; } </style> <body> <div class="icon-bar"> <a class="active" href="https://funeral-notices.co.uk/national" target="_blank"><i class="fa fa-home"></i></a> <a href="https://funeral-notices.co.uk/national/all-announcements" target="_blank"><i class="fa fa-search"></i></a> <a href="https://funeral-notices.co.uk/register" target="_blank"><i class="fa fa-user-plus"></i></a> <a href="https://www.fngifts.co.uk" target="_blank"><i class="fa fa-shopping-bag"></i></a> <a href="https://www.facebook.com/funeralnoticesonline/" target="_blank"><i class="fa fa-facebook"></i></a> </div> </body> </html>
×
×
  • Create New...