Horizontal Navigation with Logo in Middle

Centered Logo in Navigation Bar?

Simply use Flexbox. Just replace the div #logo with your image.

HTML

<nav>
<a href="">Home</a>
<a href="">Artwork</a>
<div id="logo"></div>
<a href="">Responses</a>
<a href="">Contact</a>
</nav>

CSS

html, body{
height: 100%;
}

body{
margin: 0;
}

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

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

#logo{
width: 200px;
height: 100%;
background: rgba(0,0,0,0.3);
}

html,body {  height: 100%;}body {  margin: 0;}nav {  display: flex;  width: 100%;  height: 20%;  background: #eee;  align-items: center;  justify-content: center;}a {  text-decoration: none;  color: rgba(0, 0, 0, 0.8);  margin: 0 40px;}#logo {  width: 200px;  height: 100%;  background: rgba(0, 0, 0, 0.3);}
<nav>  <a href="">Home</a>  <a href="">Artwork</a>  <div id="logo"></div>  <a href="">Responses</a>  <a href="">Contact</a></nav>

Horizontal Navigation with Logo in Middle

I recently answered a question similar to this.

It can be found here: How to add a custom item to a specific WordPress menu item position

There are 3 options as i said in the answer above.

jQuery, PHP or HTML/CSS and its down to what you are most comfortable with and if it is for a client, what they most prefer.

I would personally go with the PHP way and split the navigation in 2 and have the logo in the middle.

EDIT

So you'll need the jQuery version.

Your navigation will need to be setup with Home being the first element on the navigation. This will mean that the mobile version will have home as the first link.

Next you need to add the jQuery below underneath your inclusion of the jQuery library

jQuery(document).ready(function() {
jQuery("ul#mpcth_menu").find("li:contains('Home')").hide(); // hides home from navigation
var position = jQuery("ul#mpcth_menu li").length-1;
var i = 0;
jQuery('ul#mpcth_menu li').each(function() {
if(i == position/2) {
jQuery(this).after('<img src="http://www.bostonirishclothing.com/wp-content/uploads/2014/01/Bostin-Irish-Header_Woo.png" width="250" />');
}
i++;
});
});

This code removes the first element from the main nav, being the Home button, then figures out how many is left and places the logo into the middle.

You will also need to remove the CSS which adds the logo to the class menu-item-166 as this may cause problems.

Hope this fixes your problems.

DEMO

How to create menu with a logo in the middle using html and css

You can use flexbox, checkout the basics of flexbox here

I've updated your code to work with flexbox.

I've moved the logo into the ul element.

  <header>
<div class="container">
<ul class="nav">
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><h2 id="logo">logo</h2></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Social</a></li>
</ul>
</div>
</header>

I've updated your css to use flexbox, notice .nav has a display:flex on there now.

 header {
width: 100%;
}

#logo {
text-align: center;
margin-top:0;
}

.nav {
text-align: center;
display:flex;
}

.nav li {
flex: 1;
display: inline;
}

/* use media query to change the layout */
@media (min-width: 768px) {
body {
background-color: #f2f2f2;
}

.nav {

}

.nav li:nth-child(1), .nav li:nth-child(2) {
float: none;
}

.nav li:nth-child(3), .nav li:nth-child(4) {
float: none;
}
}

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}

That should be enough to get you going. Heres the codepen

Center logo in middle of navigation menu

I ran into this very scenario recently. I got it working by positioning the logo absolutely, then using :nth-child selectors to target the elements on either side of the logo and add margins to make room.

Here's the Fiddle

:nth-child is great, but you might want a fallback set of styles for older browsers .

Navigation Bar with centered Logo

The solution is based on using media queries to change the layout from small screen up to desktop .

<header>
<h2 id="logo">Logo</h2>
<ul class="nav">
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Social</a></li>
</ul>
</header>

header {
width: 90%;
margin: 0 auto;
}

#logo {
text-align: center;
}

.nav {
text-align: center;
}

.nav li {
display: inline;
margin-right: 1em;
}

/* use media query to change the layout */
@media (min-width: 768px) {
body {
background-color: #f2f2f2;
}

.nav {
margin-top: -42px;
}

.nav li:nth-child(1), .nav li:nth-child(2) {
float: left;
}

.nav li:nth-child(3), .nav li:nth-child(4) {
float: right;
}
}

see it live http://jsbin.com/arexuq/2/

How to create a two row navigation bar with a logo in the middle

I would suggest div and span instead of ul and li. Also, divide all stuff in 3 parts - left, center and right. That will make your task easier resulting below.

HTML:

<body>
<div id="top-bar">
<div class="container">
<div class="left-right-container">
<div class="left-container">
<span><a href="#"><i class="fab fa-facebook"></i>      <i class="fab fa-twitter"></i>      <i class="fab fa-instagram"></i></a> </span>
</div>
<div class="right-container">
<span><a href="#">01283 575 671</a></span>
<span><a href="#">Join Now </a></span>
</div>
</div>
<div class="center-container">
<span style="padding:0;"><a href="#" style="position: absolute; z-index:1; top:0;"><img src="https://via.placeholder.com/250x115" alt="Sample Image" width="100%"></a></span>
</div>
</div>
</div>
<div class="nav-bg">
<div class="container">
<div class="left-right-nav">
<div class="left-nav">
<div>
<span><a href="#" class="nav_first">Facilties</a></span>
<span><a href="#">Timetable</a></span>
<span><a href="#">Blog</a></span>
</div>
</div>
<div class="right-nav">
<div>
<span><a href="#">The Team</a></span>
<span><a href="#">Events</a></span>
<span><a href="#" class="nav_last">Contact Us</a></span>
</div>
</div>
</div>
<div class="center-nav">
</div>
</div>
</div>

CSS:

* { box-sizing:border-box }

body {
margin: 0px;
font-family: 'Montserrat', sans-serif;
}

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.left-container, .center-container, .right-container{
position:absolute;
display:inline-block;
margin:0;
padding:0;
width: calc(50% - 125px);
}
.left-container{
left:0;
height: 50px;
overflow:hidden;
}
.left-container span {
margin: auto;
left: 0;
right: 0;
position: absolute;
}
.center-container{
width:250px;
height:115px;
z-index:2;
left:0;
right:0;
margin:auto;
}
.right-container{
right:0;
height: 50px;
overflow:hidden;
}
.right-container span:last-child{
background:#081F2D;
width:40%;
float:right;
}
.right-container span:last-child a{
color:#FFDE00;
}
.left-right-container{
background: #FFDE00;
height: inherit;
}
.left-container span, .right-container span {
padding: 15px 15px;
font-weight:500;
text-transform:uppercase;
width:59%;
display: inline-block;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
.left-container span a, .right-container span a {
display: block;
color:#081F2D;
text-decoration:none;
text-align: center;
font-size:17px;
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}

#top-bar {
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 0px;
overflow: hidden;
width:100%;
min-width: 650px;
min-height: 50px;
background: #FFDE00;
}

/******************/

.nav-bg{
width:100%;
position:absolute;
top:50px;
height: 50px;
z-index:1;
}
.left-right-nav{
background-color: #EEEEEE;
height: inherit;
}
.left-nav, .center-nav, .right-nav {
position:absolute;
display:inline-block;
width: calc(50% - 125px);
}
.left-nav{
left:0;
}
.center-nav{
width:250px;
height:50px;
z-index:1;
left:0;
right:0;
margin:auto;
}
.right-nav{
right:0;
}
.left-nav div, .right-nav div{
margin: auto;
left: 0;
right: 0;
position:absolute;
background-color: #EEEEEE;
text-align:right;
}
.left-nav div span{
}
.right-nav div span{
float:left;
}
.left-nav div span, .right-nav div span{
display: inline-block;
}
.left-nav span a, .right-nav span a {
padding: 15px 40px;
display: block;
font-size: 1rem;
text-align: center;
color:#081F2D;
text-transform:uppercase;
font-weight:600;
text-decoration: none;
background-color: #EEEEEE;
}

Sample Image

https://codepen.io/anon/pen/MPGRvm

Horizontal Navigation Bar CSS - center logo and text

The easiest way here is set ul li and ul li a line-height for 90px (as your ul height) and set padding-top and bottom to 0.

li { float: left; line-height: 90px; }
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 0px 16px;
text-decoration: none;
}

But now your drop down list is broken. We fix it by setting line-height and height for .dropdown-content links like that:

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
line-height: normal;
height: auto;
}

Now it looks fine, but your image is not aligned correctly. First of all, we need to set display: inline-block for our list elements.

li { float: left; line-height: 90px; display: inline-block; }

And then add vertical-align: middle for image

li img { vertical-align: middle; }

The last thing you want to know is unwanted hover on the first element. Remember that you can use nth-child, first-child, first-of-type combined with not selector to count elements. Add line:

li:first-child a:hover { background: none; }

And now everything should work just like you want it to. Anyway, few tips for future.

  • Don't be afraid of using divs. It helps, helps a lot when you need to style and control elements on website. It's nothing more than just a container.

  • Keep your CSS clean. It's Cascading Style Sheets. You've got in your CSS li a styles and after this li a, .dropbtn styles that override the previous one.

Don't give up and learn on. ;)

How can I center the logo and navigation horizontally on the same line?

I added display: flex CSS property in your header tag to inline both your navigation and logo, after I added margin-left: auto property to align your navigation to right and remove margin-top property from li

* {  margin: 0;  padding: 0;  box-sizing: border-box;}
body { background-color: #000; color: #fff; font-family: 'Barlow', sans-serif;}
header { color: white; background-color: black; padding: 25px 0 25px 0; display: flex;}
/* Navigation */
.main-logo {
}
.main-nav { display: flex; justify-content: space-around; align-items: center; margin-left: auto;}
.main-nav ul { display: flex; justify-content: space-around; width: 40%; list-style: none;}
.main-nav a { color: #fff; width: 100px; padding: 0; display: block; text-decoration: none; text-transform: uppercase; text-align: center;}
.main-nav li { float: left; padding: 0;}
/* Links */
a:hover { color: #a8a8a8;}
body a:visited { color: #fff;}
.intro-content { padding-top: 170px; height: 850px; background: linear-gradient(red, transparent 90%), linear-gradient(0deg, #000, transparent), #ffa949 url('img/header-bg.jpg') no-repeat center;
background-size: cover;}
.intro-content h1 { color: white; font-size: 3.25rem; /* 26px/16px */ letter-spacing: .065em; font-weight: 200; padding: 75px 0 5px 0;}
.main-content,.intro-content,.main-footer { text-align: center;}
.main-content { padding-top: 25px; padding-bottom: 95px;}
.secondary-content { text-align: center; padding-top: 80px; padding-bottom: 70px; border-bottom: 2px solid #dfe2e6;}
.socialmedia { text-align: center; margin: 50px 0 20px 0;}
.socialmedia a { margin: 0 25px 0 25px; color: white; font-size: 1.5rem;}
.main-footer { margin-bottom: 50px;}
.t-border { border-top: 2px solid #dfe2e6;}
/* Layout */
.main-content,.secondary-content { width: 75%; padding-left: 25px; padding-right: 25px; margin: auto; max-width: 960px;}
/* Floats */
.article1,.article2 { width: 40%;}
.article2 { float: left;}
.article1 { float: right;}
/* Float Clearfix */
.group:after { content: ""; display: table; clear: both;}
<DOCTYPE! html><html lang="en-US" dir="ltr">    <head>        <meta name="viewport" content="width=device-width">        <meta charset="UTF-utf-8">        <title>100 Thieves | Home</title>        <link rel="stylesheet" href="style.css">        <link href="https://fonts.googleapis.com/css?family=Barlow&display=swap" rel="stylesheet">        <script src="https://kit.fontawesome.com/ab11039b93.js"></script>    </head>    <body>        <header>            <div class="main-logo">                <a href="index.html"><img src="Img/100Thieves.png" alt="100 Thieves Logo"></a>            </div>
<div class="main-nav"> <nav> <ul> <li><a href="#">About</a></li> <li><a href="#">Store</a></li> <li><a href="#">Teams</a></li> <li><a href="#">Partners</a></li> <li><a href="#">Careers</a></li> </ul> </nav> </div> </header>
<div class="intro-content"> <h1>Take What's Not Given</h1> <p>The words of Matt "Nadeshot" Haag and the official 100 Thieves motto</p> </div>
<div class="main-content">
<div class="about"> <h2>About 100 Thieves</h2> <p>100 Thieves is a new gaming lifestyle company and eSports organization built at the intersection of competitive gaming, entertainment, and apparel. 100 Thieves was founded in 2017 by Matt "Nadeshot" Haag, the former Optic Gaming Call of Duty captain, X Games gold medalist, and 2014 eSports athlete of the year. After retiring from competitive play, Matt went on to build some of the most popular gaming channels on twitch and youtube, and then founded 100 Thieves as a creative outlet for his passions in competitive gaming, storytelling, and streetwear. The company currently competes in professional League of Legends, Call of Duty, Fortnite and Apex Legends. </p> </div>
<div class="cashapp"> <h2>About Cash App</h2> <p>Cash App is the money app. It's the easiest way to pay people back—friends, family, coworkers—anyone, really. Sending and receiving money is totally free and fast, and most payments can be deposited directly to your bank account in just a few seconds. With cash app, you can also buy and sell bitcoin instantly, get a paycheck deposited right to the app, or create a unique $cashtag that you can share with anyone to get paid fast. You can even use the free cash card to spend the money you keep in the app anywhere you like. Customize your card with a laser-etching and add a boost from the app to instantly save at some of your favorite places whenever you swipe. <a href="http://www.cash.app/download">Download</a> cash app for free. </p> </div>
</div>
<div class="secondary-content t-border group">
<div class="article1"> <img src="Img/win.png" alt="100 Thieves wins at CWL London"> <h2>Big Win at CWL London</h2> <p>100 Thieves won their first ever Call of Duty eSports title on May 5, 2019. After knocking out top teams like Envy, Team Heretics, and Team Reciprocity, and sweeping OpTic Gaming aside with ease, 100 Thieves was matched against eUnited. It was a close fought affair all through the match, and with both teams mere seconds away from claiming victory, 100 Thieves managed to hold on to the point and won the final map 250-238. <p><a href="https://www.gamesradar.com/cwl-london-2019-recap-winner/">Read more...</a></p> </div>
<div class="article2"> <img src="Img/franchise.png" alt="100 Thieves gunning for the Los Angeles franchise"> <h2>Gunning the Los Angeles Franchise</h2> <p>One of the most sought after spots in the competition is the Los Angeles franchise, and according to reports 100 Thieves are hoping to raise more money in the hopes of locking down the California position. If successful, it’s believed that 100 Thieves would be the sole team based in Los Angeles in the Call of Duty franchise league, an ideal situation as the team’s headquarters and LCS teams are both based in the city.</p> <p><a href="https://www.dexerto.com/call-of-duty/100-thieves-reportedly-raising-25-million-for-call-of-duty-franchise-spot-675708">Read more...</a></p> </div> </div>
<div class="socialmedia"> <h3>Follow 100 Thieves</h3> <a href="https://twitter.com/100Thieves"><i class="fab fa-twitter"></i></a> <a href="http://instagram.com/100thieves"><i class="fab fa-instagram"></i></a> <a href="https://www.youtube.com/100thieves"><i class="fab fa-youtube"></i></a> <a href="https://www.twitch.tv/team/100thieves"><i class="fab fa-twitch"></i></a> </div>
<div class="main-footer"> <footer> © 100 Thieves, LLC 2019 </footer> </div> </body></html>

CSS / HTML Navigation and Logo on same line

The <ul> is by default a block element, make it inline-block instead:

.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
vertical-align:top;
}

CodePen Demo



Related Topics



Leave a reply



Submit