Custom shape of cover for Icon menu

  • Resolved artbetonfi

    (@artbetonfi)


    9 years ago

    Hello, I use Free Pinnacle theme with Toolkit.

    I like the icon menu in toolkit for its responsiveness but round shape of cover for icons do not perfectly suit our company logo. Can I change it for hexagon somehow? For example using custom css?

    Thank you in advance,
    Irina

    https://www.ads-software.com/plugins/virtue-toolkit/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Ben Ritner – Kadence WP

    (@britner)

    Hey,
    It’s possible, you made have to use an image graphic but there are some ways to do with css too. Need to see a link though? Can you post a link to your site?

    Kadence Themes

    Thread Starter artbetonfi

    (@artbetonfi)

    Hello!

    Thank you for reply!

    The website is a-b.fi it is in work, so do not look great yet. Icon menu is just after header.

    Hope you will help me.

    Best wishes,
    Irina

    Plugin Author Ben Ritner – Kadence WP

    (@britner)

    ok so here is some css you can use for example. You would add this in your theme options > custom css box:

    .home-iconmenu .home-icon-item i {
  position: relative;
  width: 300px;
  height: 173.21px;
  background-color: transparent;
  margin: 86.60px 0;
  padding:0;
  border-radius:0;
}

.home-iconmenu .home-icon-item i:before,
.home-iconmenu .home-icon-item i:after {
  transition: all .4s ease-out;
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
  content: "";
  position: absolute;
  width: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}

.home-iconmenu .home-icon-item i:before {
  bottom: 100%;
  border-bottom: 86.60px solid transparent;
}

.home-iconmenu .home-icon-item i:after {
  top: 100%;
  width: 0;
  left:0;
  border-top: 86.60px solid transparent;
}
.home-iconmenu .home-icon-item i img {position:relative;z-index:100;max-width: 250px;margin: 0 auto;
}
.home-iconmenu .home-icon-item:hover i {
  background-color: #ffc101;
}
.home-iconmenu .home-icon-item:hover i:before {
  border-bottom-color: #ffc101;
}
.home-iconmenu .home-icon-item:hover i:after {
  border-top-color:#ffc101;
}

    Kadence Themes

    Thread Starter artbetonfi

    (@artbetonfi)

    Thank you very much for your help! It works!

    They are rather big but I think I can fix it)))

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom shape of cover for Icon menu’ is closed to new replies.