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

How can I make a navbar with a centered logo – Photoshop

I’m trying to do a navbar with centered logo, but I can’t do it the right way.

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

nav {
  display: flex;
  width: 100%;
  height: 5%;
  background: #eee;
  align-items: center;
  justify-content: center;
}

a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  margin: 0 40px;
}

.circle {
  height: 150px;
  width: 150px;
  background-color: #eee;
  border-radius: 550%;
  display: inline;
}
<nav>
  <a href="">Menu</a>
  <a href="">Menu</a>
  <span class="circle"></span>
  <a href="">Menu</a>
  <a href="">Menu</a>

I was expecting something like this, which I did in Photoshop:
Logo

Tags:

3

Answers


  1. 0

    use justify-content:space-between; instead of justify-content:center; and add two divs.

    <nav>
  <div>   <!--div 1-->
    <a href="">Menu</a>
    <a href="">Menu</a></div>
  <span class="circle"></span>
  <div> <!--div 2-->
    <a href="">Menu</a>
    <a href="">Menu</a></div>
</nav>

    html,
body {
  height: 100%;
}

body {
  margin: 0;
}

nav {
  display: flex;
  width: 100%;
  height: 5%;
  background: #eee;
  align-items: center;
  justify-content: space-between;
}

a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  margin: 0 40px;
}

.circle {
  height: 150px;
  width: 150px;
  background-color: #eee;
  border-radius: 550%;
  display: inline;
}
    <nav>
  <div>
    <a href="">Menu</a>
    <a href="">Menu</a></div>
  <span class="circle"></span>
  <div>
    <a href="">Menu</a>
    <a href="">Menu</a></div>
</nav>
    Login or Signup to reply.
  2. 0

    demo: https://codepen.io/phong18/pen/KKPyzro

    html:

    <nav>
  <div class="left-box">
    <a href="">Menu</a>
    <a href="">Menu</a>
  </div>
  <span class="circle"></span>
  <div class="right-box">
    <a href="">Menu</a>
    <a href="">Menu</a>
  </div>
</nav>

    add more css: 

    .left-box,.right-box{
  width: 50%;
  display: inline-block;
}
.left-box{
  text-align: left;
}
.right-box{
  text-align: right;
}
    Login or Signup to reply.
  3. 0

    try with this code view in full page mode

    @media screen and (min-width:768px){
    .navbar-brand-centered {
        position: absolute;
        left: 50%;
        display: block;
        width: 160px;
        text-align: center;
        background-color: #eee;
    }
    .navbar>.container .navbar-brand-centered, 
    .navbar>.container-fluid .navbar-brand-centered {
        margin-left: -80px;
    }
}
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
    	  <div class="container">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <div class="navbar-brand navbar-brand-centered">Brand</div>
		    </div>

		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="navbar-brand-centered">
		      <ul class="nav navbar-nav">
		        <li><a href="#">Link</a></li>
		        <li><a href="#">Link</a></li>
		        <li><a href="#">Link</a></li>
		      </ul>
		      <ul class="nav navbar-nav navbar-right">
		        <li><a href="#">Link</a></li>
		        <li><a href="#">Link</a></li>
		        <li><a href="#">Link</a></li>		        
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search