Photoshop Question posted in
The official user guide can be found here.

CSS: Most efficient suggestions on how to create this navbar? – Photoshop

I am trying to make a navigation bar exactly like this one on the image. I made it in Photoshop for few seconds but it is not easy to make it in code. The progress is that I wrote code for it, but I am afraid it is NOT responsive. I mean it may get at some point after loads of tweaking with media queries.

What would be your approach of creating this navigation bar ? How would you create the little shape underneath the logo ? My approach was to slice the shape and slice the logo and code it, but it is not very responsive.

enter image description here

HTML

<header>
<div class="float_center">
  <ul class="navigation">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li>
      <img class="shape" src="<?php echo site_url('assets/images/test.png');?>"/>
      <div class="logo"></div>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>
</header>

CSS

header 
{
    background-color:rgba(0, 0, 0, 0.74);
    height:100px;
} 

.float_center 
{
  float: right;
  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}

.float_center > .navigation 
{
  position: relative;
  left: 50%;
}


ul.navigation
{
  list-style-type: none;
  margin:0;
  padding:10px 0;
}
ul.navigation > li 
{
  float: left;
  list-style-type: none;
  margin: 0 6px;
}
ul.navigation > li > a 
{
  display: block;
  height: 26px;
  line-height: 70px;
  font-family: "American Captain";
  font-size: 20px;
  letter-spacing: 2px;
  color: #FFF;
  text-transform: uppercase;
  padding: 0px 50px;
}

ul.navigation > li > a:hover, a:active, a:focus
{
  color: #d43100;
}

.logo 
{
    background: url("../images/logo.png");
    background-repeat:no-repeat;
    background-size: 150px;
    height:150px;
    display:block;
    width:150px;
    margin-top:6px;
    padding: 0;
}

.shape
{
    position: absolute;
    width:28%;
    top: 101px;
    left: 31.5%;
    z-index: -1;
}
Tags:

2

Answers


  1. 0

    1st iteration

    Demo: http://codepen.io/dcdev/full/Jhtxv/

    #nav { position:absolute;top:0;height:50px;background:#666; width:100%;}
ul { list-style:none;display:inline;width:100%;margin:0 5%; }
ul li { display:inline-block; width:10%;border:1px solid #000;}
.bump { top:0;left:50%;width:25%;height:65px;border-radius:50%;background:#666;font-size:50px;line-height:70px;color:yellow;text-align:center;line-height:50px; }

<div id="nav">
<ul>
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li class="bump">M</li>
  <li>Menu 3</li>
  <li>Menu 4</li>
</ul>
</div>

    2nd iteration

    Based on kshay’s answer which I thought was a better solution than my previous hastily typed out example.. I took his example and improved it a bit further in the spirit of making it slightly more efficient..

    Demo: http://cssdeck.com/labs/full/z4rbbe47

    #navbar{padding:25px 30px 0;width:500px;height:40px;background:#808080;position:absolute;}
#navbar a{width:80px;background:#808080;float:left;text-decoration:none;text-align:center;}
#navbar a:nth-child(n+3){float:right;}
.circleimage{border-radius:50%;width:150px;height:65px;background-color:#808080;margin-left:175px;}
.circleimage img{margin:0 auto;display:block;position:relative;bottom:10px;}

<div id="navbar">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <div class="circleimage">
      <img src="https://d13yacurqjgara.cloudfront.net/users/305445/avatars/small/m-icon-sml.png?1364435283" />
    </div>
</div>

    3rd iteration

    Decided to fiddle around with it a tad more this evening and I think I got it just about perfect..

    Demo: http://cssdeck.com/labs/full/z4rbbe47

    #navbar:before { content:'A';display:block;width:100vw;height:65px;position:absolute;background:#808080;top:0;z-index:-1; }
#navbar:after { content:url(https://d13yacurqjgara.cloudfront.net/users/305445/avatars/small/m-icon-sml.png?1364435283);display:block;height:85px;position:absolute;background:#808080;top:0;z-index:1;border-radius:50%;width:175px;height:80px;background-color:#808080;margin:0 auto;left:0;right:0; }
#navbar { padding:20px 0 0;width:100%;height:40px;background:#808080;text-align:center; }
#navbar a { width:25%;margin:0 40px;background:#808080;text-decoration:none;color:#fff;font-weight:600;letter-spacing:0.025em;text-transform:uppercase; }
#navbar a:nth-child(2) { margin-right:100px }
#navbar a:nth-child(3) { margin-left:100px }
a:hover,a:active,a:focus,a:visited { text-decoration:none;outline:none; }

<div id="navbar">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
</div>

    Full width:

    enter image description here

    Approx 600px width:

    enter image description here

    Login or Signup to reply.
  2. 0

    I didn’t get an image you can find it and add it here is the demo http://jsfiddle.net/zf2kkyLc/2/

    Html

    <div id="navbar">
<ul>
<a href="#"><li>Link</li></a>
<a href="#"><li>Link</li></a>
<a href="#"><li class="sec">Link</li></a>
<a href="#"><li class="third">Link</li></a>
</ul>
<div class="circleimage"></div>
</div>

    CSS

    #navbar{
width:500px;
height:50px;
background-color:#808080;
}

#navbar ul{
position:absolute;
list-style:none;
}
#navbar a{
width:80px;
background-color:#808080;
float:left;
text-decoration:none;

}

.circleimage {
border-radius: 50%;
width: 150px;
height: 80px;
background-color:#808080;
margin-left:200px;

}

li.sec{
margin-left:160px;

}
li.third{
margin-left:170px;

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search