Tips for aligning a logo in the center of a navigation bar

I'm struggling to center a logo within the navigation bar of a website I am designing. Despite my attempts, I have not been successful in achieving the desired result. My goal is to have the logo positioned in the middle of the navigation bar, with other elements appearing on either side of it. Currently, everything including the logo is evenly spaced out, resulting in it being off-center. Any guidance or suggestions would be greatly appreciated.

HTML

 <nav class="main-nav-outer" id="test">
        <div class="container">
            <ul class="main-nav">
                <li><a href="#home">Home</a></li>
                <li><a href="#service">Services</a></li>
                <li><a href="#SeasonalSpecials">Seasonal Specials</a></li>
                <li class="small-logo">
                    <a href="#header"><img src="img/logo.png" alt=""></a>
                </li>
                <li><a href="#Products">Products</a></li>
                <li><a href="#team">Team</a></li>
                <li><a href="#contactbanner">Contact</a></li>
            </ul>
            <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
        </div>
    </nav>

CSS

    .main-nav-outer{
    padding:0px;
    border-bottom:1px solid #dddddd;
    box-shadow:0 4px 5px -3px #ececec;
    position:relative;
    background:#fff;
}
.main-nav{
    text-align:center;
    margin:10px 0 0px;
    padding:0;
    list-style:none;
}
.main-nav li{
    display:inline;
    margin:0 1px;
}
.main-nav li a{
    display:inline-block;
    color:#222222;
    text-transform:uppercase;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    line-height:20px;
    margin:17px 32px;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
}

.main-nav li a:hover{
    text-decoration:none;
    color: #ec5020;
}

.small-logo{
    padding:0 32px;
  margin: 0;
}

.main-section{
    padding:20px 0 110px;
}
htmlcss

Answer №1

Consider incorporating Bootstrap to achieve a design similar to this:

<nav class="main-nav-outer" id="test">
        <div class="container">
            <ul class="main-nav">
                <div class="row">
                    <div class="col-xs-5">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#service">Services</a></li>
                        <li><a href="#SeasonalSpecials">Seasonal Specials</a></li>
                    </div>
                    <div class="col-xs-2">
                        <li class="small-logo">
                            <a href="#header"><img src="img/logo.png" alt=""></a>
                        </li>
                    </div>
                    <div class="col-xs-5">
                        <li><a href="#Products">Products</a></li>
                        <li><a href="#team">Team</a></li>
                        <li><a href="#contactbanner">Contact</a></li>
                    </div>
                </div>
            </ul>
            <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
        </div>
    </nav>

To style the navigation links, update your CSS with the following code:

.main-nav li a {
            display: inline-block;
            color: #222222;
            text-transform: uppercase;
            font-family: 'Montserrat', sans-serif;
            text-decoration: none;
            line-height: 20px;
            margin: 17px 10px;
            transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
        }

Answer №2

HTML:

<nav class="main-nav-outer" id="test">
    <div class="container">
        <ul class="main-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service">Services</a></li>
            <li><a href="#SeasonalSpecials">Seasonal Specials</a></li>
            <li class="small-logo">
                <a href="#header"><img src="img/logo.png" alt=""></a>
            </li>
            <li><a href="#Products">Products</a></li>
            <li><a href="#team">Team</a></li>
            <li><a href="#contactbanner">Contact</a></li>
        </ul>
        <a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
    </div>
</nav>

CSS:

.main-nav-outer{
    padding:0px;
    border-bottom:1px solid #dddddd;
    box-shadow:0 4px 5px -3px #ececec;
    position:relative;
    background:#fff;
}
.main-nav{
    margin-left:auto;
    margin-right: auto;
    list-style:none;
}
.main-nav li{
    display:inline;
}
.main-nav li a{
    display:inline-block;
    color:#222222;
    text-transform:uppercase;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    line-height:20px;
    margin:17px 32px;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
}

.main-nav li a:hover{
    text-decoration:none;
    color: #ec5020;
}

.small-logo{
    padding:0 32px;
}

.main-section{
    padding:20px 0 110px;
}

Bootply

Answer №3

Give this a shot:

.navbar-brand {
  float: left;
  text-align: center;
  width: 378px;
}
.navbar-brand span {
  margin: 0 auto;
  text-align: center;
  color:green;
} 
.navbar-nav li a{
    display:inline-block;
    color:#222222;
    text-transform:uppercase;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    line-height:20px;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
}
      
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<nav class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
  </button>
  <a class="navbar-brand visible-xs" href="#"><span class="navbar-logo">STACK OVERFLOW</span></a>
</div>
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Menu Item 1</a></li>
<li><a href="#contact">Menu Item 2</a></li>

  </ul>
  <a class="navbar-brand hidden-xs text-center" href="#"><span class="navbar-logo">STACK OVERFLOW</span></a>
  <ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Menu Item 1</a></li>

  </ul>
</div>
  </div>
</nav>

Experience the outcome by clicking on Expand snippet.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

If I desire to utilize a particular font that I am aware is not readily accessible on the majority of users' computers

Is it possible to embed a specific font into my website if I know it's not commonly available on users' computers? I've seen some websites using unique fonts as text and not images, so I'm curious about how that is achieved. Thank you, ...

javahtmlcss

PhantomJS encountered a TypeError when trying to access a non-existent object during the evaluation of 'document.getElementById()'

Recently, I delved into the world of PhantomJS and its ability to extract data from websites through JavaScript. This process is commonly referred to as web scraping. My goal was to retrieve the text content of an element by its ID. However, I encountered ...

javascripthtmldomweb-scrapingphantomjs

How to Handle Tab Navigation on a Mobile Website without Javascript?

My website primarily targets mobile devices, with tabs in the top navigation. Currently, these tabs are hard coded instead of utilizing Javascript. We want to ensure our site is accessible on all mobile devices, including those without Javascript support. ...

javascriptjquerycssmobile

Hexagonal Shape with Rotating Border Gradient in CSS

Looking to create a hexagon shape with a rotating gradient border. Here's an example GIF for reference: https://i.stack.imgur.com/Ah1AO.gif I attempted using CSS only but the use of :after and :before tags proved limiting since they rely on border s ...

htmlcsssvg

Align content to the bottom using Bootstrap 4

Looking for help with aligning content to the middle and bottom on a full-page bootstrap layout? The first page has a background image in the first div, and a darker layer on top in the second div. <div class="h-100 w-100"> <div class="h-100 w-10 ...

htmlcsstwitter-bootstrapflexbox

<head> Javascript codes are failing to run

Currently utilizing JQuery Mobile, my goal is to navigate between pages with minimal script loading each time a page loads. Essentially, I want to import all the general scripts (such as JQuery.js, jquery_mobile.js, main.js, etc.) ONCE for all pages. In m ...

javascriptjqueryhtmljquery-mobileibm-mobilefirst

Ways to accomplish this visual style when focusing

While browsing a website, I noticed something intriguing: Upon clicking on it... How did they achieve this effect? It's not just a simple solid border, but more intricate. I examined the source code extensively but couldn't locate anything rele ...

htmlcssfocusborder

Determine the number of input tags within a div element by utilizing the closest property in jQuery

Sorry for the silly question, but I've been struggling to find a solution. Spent hours scratching my head. Here is my HTML structure: <div class= 'container'> <div class="someclass"> <input>some content</in ...

javascriptjqueryhtml

Spinner loading animation not showing correctly

Even though it shows up when I hover over and inspect, the image remains completely invisible. It's saved in the same folder and I believe all the file names are correct, but for some reason, it's just not working as expected. Any help would be g ...

javascripthtmlcssajax

Using .float-right and .float-left within a .row in bootstrap 4 does not achieve the desired result

When using Bootstrap 4, the float property may not work as expected inside a row. I am trying to have the right div appear on the left and the left div appear on the right, but in responsive view I want the right div to be displayed before the left div. ...

htmlbootstrap-4css-float

What is the best way to style these CSS elements within the stylesheet?

I'm currently working on customizing a navigation menu in DotNetNuke. Although my question primarily relates to CSS syntax. Can someone please provide guidance on how to style a class that resembles the following? <tr class="mi mi0-0 id58 first"& ...

css

Guide to displaying a confirmation prompt in c# programming

I need to create a confirmation window similar to confirm() in JavaScript that will pop up when a button is clicked. If the user selects "YES", I want to execute some C# code. How can I achieve this? EDIT: here is the code snippet that I have: SCRIPT: & ...

c#htmlasp.net

Ordering styles in Material UI

I've spent countless hours customizing this element to perfection, but the more I work on it, the more of a headache it gives me. The element in question is an outlined TextField, and my focus has been on styling its label and border. Initially, I th ...

javascripthtmlcssreactjsmaterial-ui

WordPress does not allow self-referencing within the same site

I am currently working on a wordpress site and I am trying to create a link that directs to a specific section on the same page. This is the code I am using: <a href="#offer" target="_self">test</a> And here is the code for the landing secti ...

htmlwordpress

Is it possible to create an <h1> heading that can be clicked like a button and actually do something when clicked?

I am currently designing a web page that includes <div class="cane-wrap"> <h1 class="mc">christmas tic tac toe</h1> </div> located at the top center of the webpage, with autoplay running in the backgroun ...

javascripthtmlcssaudio

Ways to eliminate non-breaking spaces in HTML coding without using software

Although similar questions have been asked in the past, I am new to coding in Javascript and struggling to adapt the existing advice to fit my specific situation. My current challenge involves removing "&nbsp" from the hardcoded table row below. Ideal ...

javahtmlhard-coding

Incorporate a hanging indent within the text enclosed by the <li> element

(revised multiple times to enhance clarity) Disclaimer: I did not create the HTML code. Below is the structure of the HTML (please note that the links and text following them are on the same line): <li> <strong>Heading of section</str ...

javascriptjqueryhtmlcsstext-indent

Styling with CSS: Using a Base64 Encoded Image in the Background URL

Can a Base64 encoded image be loaded as a background image URL without exposing the actual encoded string in the page source? For example, if a Node API is used to GET request at "/image", it returns the serialized Base64 data. res.json("da ...

javascripthtmlcssnode.js

Adding CSS styles to a pre-existing table structured like a tree

Can a CSS style be applied to a pre-existing HTML table structured as a tree? For instance, in Firefox, the Bookmarks Library table is set up as a tree. Is it feasible to add a CSS style to one specific column without affecting the others? While using tr ...

htmlcssfirefox

Is there a way for me to scroll and bring the block up to the header when the button is clicked?

My goal is to create a functionality where clicking on the button with the class .booking__button will smoothly scroll the block up under the header. The position of the block should remain consistent, only the scrolling effect should be visible to the use ...

javascripthtmlcss