0

I am trying to incorporate a responsive navigation bar in my web page I am making for my school project, I want the width of all the buttons in the navigation bar to be multiples of 70px.

here's the code:

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color:#556;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:745px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:745px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}
<ul class="topnav" id="myTopnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Phishing</a></li>
  <li><a href="#contact">Spamming</a></li>
  <li><a href="#about">Pharming</a></li>
  <li><a href="#about">Smishing</a></li>
  <li><a href="#about">Internet Protection</a></li>
  <li><a href="#about">Bibliography</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>
Samarth Khandelwal
  • 11
  • 3
  • What have you tried? SO is not a code writing service. Do you understand any of the code you swiped? – hungerstar Nov 30 '16 at 15:06
  • Whats the question? whats the problem? what have you tried? – zgood Nov 30 '16 at 15:07
  • @hungerstar I understand most of the css and all of the html code in this question, just don't know javascript. Just needed some help with a line or two, i'm new to this site anyways. – Samarth Khandelwal Nov 30 '16 at 15:14
  • You don't need JavaScript to change the width of navigation items, you need CSS. – hungerstar Nov 30 '16 at 15:35
  • I know that I would need to use CSS to style the navigation bar, it's just that I don't know how to go about changing the size of individual icons. I've not even started learning CSS in school so I had to learn a bit of CSS in few days, I wanted the web page to have a nice style. I do understand the code but my understanding is not thorough enough. – Samarth Khandelwal Nov 30 '16 at 15:45
  • It really isn't a 100% clear what you're asking. You say buttons, then icons, then JavaScript, you mention multiple width of 70px etc. etc. Please clarify the exact thing you are trying to do and make sure you **share what you have tried** (this helps us diagnose the issue and not repeat what you've already done). – hungerstar Nov 30 '16 at 19:06
  • I haven't tried anything as such as i was confused how to go about it, i can set one particular size but i'm having problems with multiples. this is what i want to do; [link](https://drive.google.com/file/d/0B2a8Kv9TYhnDczZUMGRDbWVVUEU/view?usp=sharing) and here's the pattern; [link](http://lea.verou.me/css3patterns/#japanese-cube) – Samarth Khandelwal Dec 01 '16 at 12:33
  • Possible duplicate of [How do I create a row of justified elements with fluid spacing using CSS?](http://stackoverflow.com/questions/14027385/how-do-i-create-a-row-of-justified-elements-with-fluid-spacing-using-css) – Paul Sweatte Jan 19 '17 at 04:17

0 Answers0