title: Circular menu in a responsive bootstrap website // how to maintain menu button positions?
body: <p>I created a horizontally sliding website, its a one wide container site with 500% width and 5 sections each 20% width. I found a CSS jquery circular menu that I manipulated to my requirements and fixed it so it is fixed in the center when the website is flowing right and left, unfortunately when I resized the page or changed the resolution, the menu page alignment failed . Yesterday, I decided to change the website to be a responsive design website and I used bootstrap to accomplish this and it worked. the problem is with the circular menu. I managed to fix its position to be centered even when I change the browser width, but the menu items don't move with the menu button, it moves in a different direction ,so its not aligned on small width. How can I stick the menu items to the menu itself ?</p>
  
  <p>The menu code HTML code:</p>
  
  <pre><code>&lt;div class="circular-menu"&gt;
              &lt;div class="circle"&gt;
  
                 &lt;ul id="nav" class="cirular-list navbar-default" &gt;
                          &lt;li&gt;&lt;a href="#Home"&gt;Home&lt;/a&gt;&lt;/li&gt;              
                          &lt;li&gt;&lt;a href="#OurWork"&gt;Our Work&lt;/a&gt;&lt;/li&gt;            
                          &lt;li&gt;&lt;a href="#Technologies"&gt;Technologies&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#ContactUs"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#AboutUs"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
              &lt;/div&gt;
  
                  &lt;a href="" class="menu-button"&gt;&lt;img id="Img1" runat="server" src="Images/c1.jpg" /&gt;&lt;/a&gt;
  
              &lt;/div&gt;
  </code></pre>
  
  <p>The Menu CSS:</p>
  
  <pre><code>body
  {
      background:#ffffff;
      }
  .circular-menu {
  list-style:none;
     margin: 30% 0% 0% 22%;
  
  
  }
  
  .circle {
    width: 250px;
    height: 250px;
    opacity: 0;
  
  
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
  
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
  
  }
  .cirular-list
  {
      list-style:none;
      position:inherit;
  
      }
  
  .open.circle {
    opacity: 1;
  
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2);
  }
  
  .circle a {
      font-family: 'Roboto Condensed', sans-serif;
      font-weight: 100;
      color: #000000;
      display: block;
      height: 30%;
      width: 30%;
      line-height: 40px;
      margin-left: -19%;
      margin-top: -8%;
      position: fixed;
      text-align: center;
  
  }
  
  .circle a:hover {
    color: #000000;
    font-style:underlined;
  }
  
  .menu-button {
  position: absolute;
  top: 50%;
  left: 40%;
  text-decoration: none;
  text-align: center;
  color: #444;
  border-radius: 50%;
  display: block;
  height: 100px;
  width: 102px;
  line-height: 40px;
  background: #ffffff;
  
  }
  </code></pre>
  
  <p>The JS:</p>
  
  <pre><code>var items = document.querySelectorAll('.circle a');
  
  for (var i = 0, l = items.length; i &lt; l; i++) {
      items[i].style.left = (50 - 35 * Math.cos(-0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
  
      items[i].style.top = (50 + 35 * Math.sin(-0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
  }
  
  document.querySelector('.menu-button').onclick = function (e) {
      e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
  }
  </code></pre>
  
  <p>The section consist of 3 columns like this:</p>
  
  <pre><code> &lt;div id="ContactUs" class="section row"&gt;
              &lt;div class="jumbotron whiteBack"&gt;
              &lt;h1&gt;Contact Us&lt;/h1&gt;    
              &lt;/div&gt;        
     &lt;div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;"&gt;
  Left part
  &lt;/div&gt;
     &lt;div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;"&gt;
  Circular Menu
  &lt;/div&gt;
     &lt;div class="col-sm-4 col-md-4 col-lg-4" style="background-color:white;"&gt;
  Right part
  &lt;/div&gt;
  </code></pre>