Kimberly Wright Kimberly Wright - 5 months ago 10
HTML Question

Remove border on icons click menu

I successfully created a metro menu here:

However I have two questions/issues that I am having:


  1. There is a border showing when click on the items and I don't know where it's coming from.

  2. How can I add a title that centers on the screen w/o affecting the icons



enter image description here

There is also big space at the bottom of my menu so I want to make sure that it only shows the proper space between my menu. I added max-height on the body element but did not work. Any idea?

Here's my CSS:

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900);

body {
font-family: 'Lato', sans-serif;
background: #ecf0f1;
}

a{ text-decoration: none; }
h2 { color: #fff;
font-size: 22px;
margin: 0 24px;
font-weight: 300;
}


/*= ICON BOXES
--------------------------------------------------------*/

ul.icon-menu {margin-top: 16px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #2b99ce;}
li.icon-box.design {background: #24cccd;}
li.icon-box.coding {background: #9a639a;}
li.icon-box.shop {background: #c44745;}
li.icon-box.contact {background: #2d9a63;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}

.icon-box a {display: block;}

i.fa {
position:absolute;
pointer-events:none;
color:white ;
margin:16px 0 0 14px;
}



/*= TITLE BOXES
--------------------------------------------------------*/
.icon-box.home h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #2b99ce;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #247eaa;

}

.icon-box.home a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;

}

.icon-box.design h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #24cccd;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #1da7a8;
}

.icon-box.design a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;

}


.icon-box.coding h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #9a639a;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #6d466d;
}

.icon-box.coding a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;

}


.icon-box.shop h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #c44745;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #9b3735;
}

.icon-box.shop a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;

}

.icon-box.contact h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #2d9a63;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #1e6b44;
}

.icon-box.contact a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;

}



/*= MENU ICONS
--------------------------------------------------------*/


span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat; width: 32px; height: 32px; margin: 43px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}

.icon-box a {
padding: 120px;
}

.icon-menu i {
border-radius: 50%;
box-shadow: 0 0 0 50px transparent;
padding: 0.2em 0.25em;
background: rgba(255,255,255,0.1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
-ms-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
}

.icon-menu li:hover i,
.icon-menu li:active i,
.icon-menu li:focus i {
box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
-ms-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
}


I appreciate your help. Thanks!

Answer

That appears when you :focus or when the link is :active. It is for accessibility purpose. Use the following CSS to get rid of it.

.icon-box a:focus,
.icon-box a:active {
  outline: none;
}

Removing the padding from there will get rid of bottom space and replacing them with width and height:

.icon-box a {
  padding: 0;
  width: 120px;
  height: 120px;
}

Creating a <h1> or something and centring, you can use the following wrapper class:

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900);
h2,
i.fa {
  color: #fff
}
.icon-box.design h2,
.icon-box.home h2 {
  z-index: -999;
  top: 0;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s
}
body {
  font-family: Lato, sans-serif;
  background: #ecf0f1
}
a {
  text-decoration: none
}
h2 {
  font-size: 22px;
  margin: 0 24px;
  font-weight: 300
}
ul.icon-menu {
  margin-top: 16px
}
li.icon-box {
  width: 120px;
  height: 120px;
  list-style: none;
  left: -47px;
  position: relative;
  margin-bottom: 3px
}
li.icon-box.home {
  background: #2b99ce
}
li.icon-box.design {
  background: #24cccd
}
li.icon-box.coding {
  background: #9a639a
}
li.icon-box.shop {
  background: #c44745
}
li.icon-box.contact {
  background: #2d9a63
}
.icon-box h2 {
  font-size: 20px;
  text-shadow: 1px 1px 2px rgba(150, 150, 150, 1)
}
.icon-box a {
  display: block;
  padding: 120px
}
i.fa {
  position: absolute;
  pointer-events: none;
  margin: 16px 0 0 14px
}
.icon-box.home h2 {
  position: absolute;
  left: 0;
  opacity: 0;
  background: #2b99ce;
  transition: all .5s;
  border-left: 3px solid #247eaa
}
.icon-box.home a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center
}
.icon-box.design h2 {
  position: absolute;
  left: 0;
  opacity: 0;
  background: #24cccd;
  transition: all .5s;
  border-left: 3px solid #1da7a8
}
.icon-box.coding h2,
.icon-box.shop h2 {
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  z-index: -999;
  position: absolute;
  top: 0;
  line-height: 120px;
  width: 120px
}
.icon-box.design a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center
}
.icon-box.coding h2 {
  left: 0;
  opacity: 0;
  background: #9a639a;
  transition: all .5s;
  border-left: 3px solid #6d466d
}
.icon-box.coding a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center
}
.icon-box.shop h2 {
  left: 0;
  opacity: 0;
  background: #c44745;
  transition: all .5s;
  border-left: 3px solid #9b3735
}
.icon-box.shop a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center
}
.icon-box.contact h2 {
  z-index: -999;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: #2d9a63;
  line-height: 120px;
  width: 120px;
  -webkit-transition: all .3s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  border-left: 3px solid #1e6b44
}
.icon-box.contact a:hover h2 {
  opacity: 1;
  left: 120px;
  margin: 0;
  text-align: center
}
span.icon {
  display: inline-block;
  background: url(../img/icon-sprites.png) no-repeat;
  width: 32px;
  height: 32px;
  margin: 43px 40px
}
span.icon.home {
  background-position: 0 0
}
span.icon.aboutme {
  background-position: -36px 0
}
span.icon.portfolio {
  background-position: -72px 0
}
span.icon.blog {
  background-position: -109px 0
}
span.icon.contact {
  background-position: -145px 0
}
.icon-menu i {
  border-radius: 50%;
  box-shadow: 0 0 0 50px transparent;
  padding: .2em .25em;
  background: rgba(255, 255, 255, .1);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: box-shadow .6s ease-in-out;
  -moz-transition: box-shadow .6s ease-in-out;
  -o-transition: box-shadow .6s ease-in-out;
  -ms-transition: box-shadow .6s ease-in-out;
  transition: box-shadow .6s ease-in-out
}
.icon-menu li:active i,
.icon-menu li:focus i,
.icon-menu li:hover i {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .2);
  -webkit-transition: box-shadow .4s ease-in-out;
  -moz-transition: box-shadow .4s ease-in-out;
  -o-transition: box-shadow .4s ease-in-out;
  -ms-transition: box-shadow .4s ease-in-out;
  transition: box-shadow .4s ease-in-out
}
.icon-box a:active,
.icon-box a:focus {
  outline: 0
}
.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #000;
}
.icon-box a {
  padding: 0;
  width: 120px;
  height: 120px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <ul class="icon-menu">
    <li class="icon-box home"> <i class="fa fa-home fa-4x"></i>
      <a href="#">
        <h2>Home</h2>
      </a>
    </li>
    <li class="icon-box design">
      <i class="fa fa-paint-brush fa-4x"></i>
      <a href="#">
        <h2>Design</h2>
      </a>
    </li>
    <li class="icon-box coding">
      <i class="fa fa-code fa-4x"></i>
      <a href="#">
        <h2>Coding</h2>
      </a>
    </li>
    <li class="icon-box shop">
      <i class="fa fa-shopping-cart fa-4x"></i>
      <a href="#">
        <h2>Shop</h2>
      </a>
    </li>
    <li class="icon-box contact">
      <i class="fa fa-envelope fa-4x"></i>
      <a href="#">
        <h2>Contact</h2>
      </a>
    </li>
  </ul>
  <div class="center">
    <h1>Hello</h1>
    <h2>How are you?</h2>
</div>

Preview

It shows like this for me:

enter image description here