How to make round circle links responsive in css?


Tags: css,menu,css-shapes

Problem :

I have been struggling with this for quite some time now. Apparently using % width and height is not enough?

Right now I have fixed 100px width and height and border radius is half of it so it will make it look round. Line height is set to 100px so text would display vertically in the middle of those circles. I have no idea how to vertically center text in another way...

How do I make this menu responsive so it would become smaller as the screen size changes?

HTML:

<div id="menu">
 <ul>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul> 
</div>

CSS:

#menu ul {list-style-type: none; padding: 0; margin: 0;}
#menu li {display: inline; float: left;}
#menu a {
    display: block;
    width: 100px;
    height: 100px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: 1px #a2a2a2 solid;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1em;
    text-align: center;
    line-height: 100px;
    margin: 5%;
}


Solution :

If you want true 'responsiveness' you can use the vw units which are directly related to the viewport width.

Jsfiddle Demo

Support isn't bad: CanIUse.com

#menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#menu li {
  display: inline-block;
}
#menu a {
  display: block;
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
  border: 1px #a2a2a2 solid;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 4vw;
  text-align: center;
  line-height: 15vw;
  margin: 5%;
}
<div id="menu">
  <ul>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
    <li><a href="#">Link</a>
    </li>
  </ul>
</div>


    CSS Howto..

    How to animate CSS Translate

    Responsive CSS, How to make clock maintain position with image on resize

    How to place something in a triangle-shaped box?

    How to change css using jquery in a php loop

    How to keep css style for only one element

    yui-css grid: how to get a 1/4 - 2/4 - 1/4 grid set up?

    How to adjust navbar to a fixed width in Twitter Bootstrap?

    How to customize HTML/CSS tooltips?

    How to split css shape in half vertically?

    How to make centered fixed width body responsive?

    CSS horizontal scroller, how to position “below” before “right”?

    Show Item when Hover Over Parent

    How to use font-awesome from server

    CSS flipping animation in IE: Turned side shows mirror content

    How to split page into 4 equal parts?

    How to script CSS to achieve hide/appear effect based on hover

    How do I iterate through the elements of a table and change the background color of each element in JavaScript?

    how do i avoid this title from overflowing?

    How to create a master page using HTML? [closed]

    How to create three columns in css

    How do I offset where my fixed nav bar takes me?

    How to remove flexbox default padding/margin/pagemargin?

    How can i make a site like this by myself? [closed]

    How can I center div in div in IE7

    How to achieve this formatting

    How to place Social media icons on right side of navbar

    How can I make this kind of a border?

    How to get MathJax's HTML output just like Stackedit.io?

    How to make one string from a sentence capital in HTML/CSS?

    How am I supposed to change the Bootstrap CSS properties in a new Yeoman project?