how to create equal spaces in the navigation bar?

Question

i want to make my navigation bar look like this http://www.templatemonster.com/demo/51347.html

please while correcting the code , do state the reason behind it. it will of great help. thanks

also the social networking icons shown are in black and the hover effect gives it a red color. is it an image or that can be achieved solely with help of css ?

body {
  background:gray;
  /*border: 2px solid yellow;*/
}

.headwrap {
  width: 93%;
  height: auto;
  margin: auto;
  padding-top: 70px;
}

.logo {
  margin: 0;
  float: left;
}

.socialbuttons {
  float: right;
}

.socialbuttons ul {
  list-style: none;
  float: right;
}

.socialbuttons ul li {
  display: inline;
  padding-left: 20px;
}

.navbar {
  margin-top: 40px;
  width: 100%;
  background: #db3636;
  float: left;
}

.navbar ul {
  list-style: none;
  margin: 0;
  float: left;
  padding: 30px 15px;
}

.navbar ul li {
  display: inline;
  padding: 15px;
  border-right: 2px solid black;
  color: white;
  font-weight: bold;
  font-family: sans-serif;
}

<!DOCTYPE html>
<html>
<head>
  <title>Industrial Website demo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial scale=1.0">
  <link href="damion.css" rel="stylesheet" type="text/css">
</head>
<body>
  <header class="headwrap">
    <div class="logo">
      <img src="logo.png" alt="Damion max">
    </div>
    <div class="socialbuttons">
      <ul>
        <li><img src="facebook.png"</li>
        <li><img src="twitter.png"</li>
        <li><img src="feed.png"</li>
        <li><img src="google.png"</li>
      </ul>
    </div>
    <nav class="navbar">
      <ul>
        <li>ABOUT US</li>
        <li>GALLERY</li>
     <li>EVENTS</li>
        <li>BLOG</li>
        <li>CONTACTS</li>
      </ul>
    </nav>
  </header>
</body>
</html>

?? can you clear up your question or at least link 2 images that are not identical ? — G-Cyrillus, Jun 17 '16 at 22:01
i want to make the navigation bar like in the link http://www.templatemonster.com/demo/51347.html — Tarique, Jun 17 '16 at 22:06

score 5 · Accepted Answer · edited May 23 '17 at 11:52

Floats and percentages of the container width is a good way to go, especially, if you can't afford to have a fixed width container. Don't forget to adjust font-size, to make sure text doesn't bloat it's container's size and remains on a single line. Also, for this to work you only need floats on "li" elements themselves. And never forget to clear the floats (clearfix class provided).

P.S. It would be much harder to achieve without use of "box-sizing: border-box;", here's a good article about box-sizing css property

The code:

 <header class="headwrap">

  <nav class="navbar">
    <ul class="clearfix">
      <li>ABOUT US</li>
      <li>GALLERY</li>
      <li>EVENTS</li>
      <li>BLOG</li>
      <li>CONTACTS</li>
    </ul>
  </nav>

</header>

* {
/* Very important part, set on all elements for simplicity.  */
  box-sizing: border-box;
}

body {
    background:gray;
    /*border: 2px solid yellow;*/
}

.headwrap {
    width: 93%;
    height: auto;
    margin: auto;
    padding-top: 70px;
}

.navbar {
    margin-top: 40px;
    width: 100%;
    background: #db3636;
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 15px; 
}

.navbar ul li {
  /* float it to have no issues with whitespace between inline-blocks */
    float: left;
    padding: 15px;
  /* borders from both sides */
    border-right: 1px solid black;
    border-left: 1px solid black;
    color: white;
  font-size: 14px;
    font-weight: bold;
    font-family: sans-serif;

  text-align: center;
  /* total width 100% / 5 elements */
  width: 20%;
}

/* No left border for the first one */
.navbar ul li:first-child {
  border-left: none;
}

/* No right border for the last one */
.navbar ul li:last-child {
  border-right: none;
}

/* Helps with floats inside */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after {
  clear: both;
}

About clearfix

And here's the fiddle

thank you :) and what to change so that the border covers the whole height of menu bar ? — Tarique, Jun 18 '16 at 07:14
please tell about how to add the home and the search bar also without affecting the equal spaces. unable to do so. — Tarique, Jun 19 '16 at 18:05

score 1 · Answer 2 · answered Jun 17 '16 at 22:12

1

Assign a fixed width to .navbar ul li, like

.navbar ul li {
  width: 120px;
}

(try with different values)

answered Jun 17 '16 at 22:12

Johannes

64,305
18
73
130

score 1 · Answer 3 · answered Jun 18 '16 at 00:31

Hi this is my first reply. I created this JS Fiddle to show you how to do it. Just click on the link for a working example with all source and drag the demo portion of the screen wider to fit it all on - this template will be easy to make mobile friendly but as a guide you should always start designing for 320px not 1024+

Hope this helps - please accept my answer if you like my response... its my first post too :-)

Note the follow css is to ensure ALL elements have padding and border included in their specified width and height so using padding/borders does NOT increase their total size. Google 'css box sizing' for more info on this

body {
background-color: #ccc;
margin: 0;
padding: 30px 0 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

*, *:before, *:after{
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;}

score 1 · Answer 4 · answered Jun 18 '16 at 07:50

1

Hover effect can be done with CSS only. try this

.socialbuttons ul li:hover {
    background: #cb3529;
}

and transitions effects

.socialbuttons li img {
transition: all 0.3s ease 0s;

}

answered Jun 18 '16 at 07:50

darla_sud

359
1
4
15

Iam unable to get the circle bg on the social buttons. Where should i put the code ? Then it will easy for hover effect. – Tarique Jun 18 '16 at 07:53
Hey...Tarique if you want copy any effect or design try to use the developer tools in the respective browsers.(I prefer Chrome) and you have to add the background color to the 'li' element in css and make the background-radius:50%; or 50px; – darla_sud Jun 18 '16 at 07:56
but its getting stretched due to the padding i have given on the social buttons – Tarique Jun 18 '16 at 08:02
send me the fiddle link. – darla_sud Jun 18 '16 at 08:06
https://chatstep.com/#test come to this chat room and enter a nickname for your self..dont change the room name. we can talk there. Because I understand that you are a novice..so want to help you more. – darla_sud Jun 18 '16 at 08:15

how to create equal spaces in the navigation bar?

4 Answers4