CODEWITHSUNDEEP
htmlcssimagenavbargraphical-logo
muszynov
muszynov

Reputation: 329

Image in the middle of navbar

I want to put an image in center of my navbar on my page. Here's my result wanted (example):

enter image description here

How to make it working (without bootstrap).

For now my code looks like this: 

<nav class="navigation">
            <ul class="navigation-list-1">
                <li class="navigation-list-item"><a href="#home">Home</a></li>
                <li class="navigation-list-item"><a href="#features">Features</a></li>
                <li class="navigation-list-item"><a href="#add-info">Add info</a></li>
                <li class="navigation-list-item"><img class="logo" src="assets/LOGO.png"></li>
                <li class="navigation-list-item"><a href="#form">Form</a></li>
                <li class="navigation-list-item"><a href="#team">Team</a></li>
                <li class="navigation-list-item"><a href="#contact">Contact</a></li>
            </ul>
        </nav>

And styling: 

.navigation-list-item {
display: inline-block;
list-style: none;
font-size: 15px;
font-weight: bold;
padding: 15px;
border-top: 10px solid white;
margin-right: -5px;

}

.logo {
max-height: 5%;
max-width: 15px;
background: cornflowerblue;
border: 5px solid cornflowerblue;

}

But it looks terrible and doesn't work... Maybe it's better way to put two navbars (left and right) into the main navbar container?

Upvotes: 1

Views: 2721

Answers (2)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7309

Use Flexbox

But it will only work if you are having odd number of children and image must be in the center.

In order to make it responsive, you should use either % or vw(view width)

Check the example, where I have used vw, and also removed margin to stick it to the top.

FYI- The trigger is onclick, so Click on the image when it's loaded ;)

function big() {
  var w = 5;
  var foo = setInterval(function() {
    if (w > 15) clearInterval(foo)
    w = w + 1;
    document.getElementById('logo').style.width = w + 'vw';

  }, 100);
}
.logo {
  width: 2vw;
  background: cornflowerblue;
  border: 5px solid cornflowerblue;
}

.outer {
  display: flex;
}

.outer>p {
  flex: 1;
  height: 70px;
  line-height: 70px;
  background: blue;
}

.outer>p>a {
  text-decoration: none;
  color: white;
}

.outer>p .logo {
  flex: 1;
}

p {
  text-align: center;
  margin: 0px;
}

body {
  margin: 0px;
}
<nav class="navigation">
  <div class="outer">
    <p class="navigation-list-item"><a href="#home">Home</a></p>
    <p class="navigation-list-item"><a href="#features">Features</a></p>
    <p class="navigation-list-item"><a href="#add-info">Add info</a></p>

    <p class="navigation-list-item"><img class="logo" id="logo" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_1280.jpg" onclick="big()"></p>
    <p class="navigation-list-item"><a href="#form">Form</a></p>
    <p class="navigation-list-item"><a href="#team">Team</a></p>
    <p class="navigation-list-item"><a href="#contact">Contact</a></p>
  </div>
</nav>

Example with Unordered List <ul>

Just added flex property to <ul>

.navigation-list-item {
list-style: none;
font-size: 15px;
font-weight: bold;
}

.logo {
  position:absolute;
  
width: 10vw;
left:calc(50% - (10vw/2) - (10px/2));
background: cornflowerblue;
border: 5px solid cornflowerblue;
}

ul{
  display:flex;
  margin-left:-40px;

}
li{
  flex:1;
  background:yellow;
  border:1px solid green;
  height:70px;
  line-height:70px;
  text-align:center;
}

li>a{
  text-decoration:none;
}
<nav class="navigation">
  <ul class="navigation-list-1">
    <li class="navigation-list-item"><a href="#home">Home</a></li>
    <li class="navigation-list-item"><a href="#features">Features</a></li>
    <li class="navigation-list-item"><a href="#add-info">Add info</a></li>
    <li class="navigation-list-item"><img class="logo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6f4af2d2d158"></li>
    <li class="navigation-list-item"><a href="#form">Form</a></li>
    <li class="navigation-list-item"><a href="#team">Team</a></li>
    <li class="navigation-list-item"><a href="#contact">Contact</a></li>
  </ul>
</nav>

Upvotes: 1

Robin Martijn
Robin Martijn

Reputation: 69

You could center the whole unordered list?

nav ul {
 text-align: center;
}

Upvotes: 0

Related Questions