Jump to content
Sign in to follow this  
Jeffo79

icon var

Recommended Posts

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?

image.thumb.png.84998d106edbaea92c672caa179e55e8.png

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>

Share this post


Link to post
Share on other sites

The HTML code doesn't seem complete.

Where  is the Header and Title parts of the page in your HTML? What classes are applied to them?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...