Place the Bootstrap brand logo amidst the links

Can anyone assist me with this issue - how can I add a brand logo between navigation links? Additionally, how do I position a link close to the brand logo similar to this example image? It is important that the design remains responsive. You can view the code here.

        <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <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">Logo</div>
            </div>
            <div class="collapse navbar-collapse" id="navbar-brand-centered">
                <ul class="nav navbar-nav">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
        </div>
    </nav>
htmlcsstwitter-bootstrapresponsenavbar

Answer №1

Perhaps this is the solution you've been searching for.

    <nav class="navbar navbar-default" role="navigation">
    <div class="navbar navbar-inner">
        <div class="container">
            <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>
            <div class="collapse navbar-collapse" id="navbar-brand-centered">
                <ul class="nav navbar-nav">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <div class="navbar-brand navbar-brand-centered">Logo</div>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Modify bootstrap CSS accordingly:

.navbar-nav > li {
  float: none;
  display: inline-block;
}
.navbar-inner {
  text-align:center;
}

Answer №2

Many thanks for your question! You can check out the code here: https://jsfiddle.net/phg350de/4/

The HTML code snippet is as follows:

        <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <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">Logo</div>
            </div>
            <div class="collapse navbar-collapse" id="navbar-brand-centered">
      <div class="row">
        <div class="col-xs-0 col-sm-3 col-md-3">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
          <ul class="nav navbar-nav">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </div>
        <div class="col-xs-0 col-sm-3 col-md-3">
        </div>
      </div>
            </div>
        </div>
    </nav>

Here's the CSS code to style the navigation bar:

.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 180px;
text-align: center;
background-color: transparent;
}
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
}

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

Filtering HTML tables with text and image search functionality

I have an HTML table that displays text and icons. I've successfully implemented image filtering and now I'm looking to add text search functionality as well. <div id="usertable"> <div class="choicebox"> <div id="choicebox"> ...

jqueryhtmlhtml-table

Preventing the audio streamer section of the page from causing a post-back

I am currently working on a webpage that includes a streaming music player/radio feature. Unfortunately, every time there is a postback initiated, the music stops playing. Is there a more modern solution to this issue? In the past, a simple pop-up window ...

phphtmlweb-applications

What is the Javascript equivalent to "new Audio()" but for video files?

When working in Javascript, accessing the HTML-5 audio object can be done like so: var audio = new Audio('nameOfFile.mp3'); However, it seems that using a similar syntax for the video element does not work (at least on Chrome). var video = new ...

javascripthtmlaudiovideo

What is the number of steps jQuery animates in?

Exploring my creative side, I decided to create my own custom animate function. Struggling to achieve a seamless animation effect, unlike the smooth transitions produced by jQuery. I'm curious about the formula they utilize to determine the ideal num ...

javascriptjquerycssalgorithmanimation

Resolve the issue of text overlapping on an image when zooming in

There seems to be an issue with overlapping text and images when zooming the page. I have included a screenshot for reference, please take a look and provide a solution. Thank you in advance.https://i.sstatic.net/oVlGN.png Here is the CSS code causing the ...

htmlcssangularbootstrap-4

Newbie inquiries regarding the process of migrating a CRUD application to PhalconPHP

I have recently delved into using PhalconPHP 1.3.1 for an application related to my master's thesis. While it is still a work in progress, I am currently focusing on implementing CRUD functionality and refining the user interface. This endeavor marks ...

phphtmlajaxnginxphalcon

Making sure that the anchor elements within a list are taking up all available space by setting them to display:block and adjusting their height/width

Looking at the example below, I want the anchor elements to take up all of the available space within their parent list items: http://jsfiddle.net/nmxmT/ I can't figure out what I did wrong :( ...

htmlcss

Why has my dropdown menu decided to go horizontal, rather than dropping down as it should?

Hi there! I'm new to css and tried following a tutorial with some tweaks. However, when adding a drop down menu using lists, it ended up going sideways instead of downward. Can anyone help me out? I also would like to have a collapsible menu implemen ...

htmlcssdrop-down-menu

Spacing between Div tags

Struggling with a tricky HTML cross-browser problem. The site was built by multiple people, making it quite messy, but needs to go live as soon as possible! Each of the 4 page layouts on the site are different and handled by separate classes. However, whe ...

csscross-browserspaces

Issue with off-canvas menu functionality on iPhone 5

My client believes that the off canvas menu on my website is not functioning properly. Despite no errors appearing in the console, I am unable to test it myself as I do not own an iPhone or iPad. Would anyone be able to help troubleshoot this? View demo he ...

javascriptjqueryioscssiphone

"Problem with binding a dropdownlist to an object causing the selected object not to return

I have successfully bound an object to a dropdownlist using Knockout 2.2.1. The binding correctly displays the items in the list, but I am facing difficulties retrieving the selected OBJECT. To illustrate this issue, I have created a JSFiddle: http://jsfid ...

htmlselectdrop-down-menubindingknockout.js

How come the section of a web page covers the header when the header's position is set to fixed?

My attempt at fixing the position property of the header as fixed has not been successful. When I scroll down the page in mobile view, the section part of the webpage overlaps the header part. The home section in this code functions properly, but the About ...

htmlcssbootstrap-4responsive-design

Eliminate billing information from the Woocommerce order management page on the backend

Is there a way to modify the text "Paid on" in the backend order details page of WooCommerce? I have already implemented this for BACS and local pickup payment methods. Replace a specific word for BACS payment method in Woocommerce order edit pages I am ...

csswordpresswoocommerceorderswoocommerce-theming

Personalized animated Reactflow Connection Lines

My goal is to develop a personalized animated connection lines in reactflow, rather than using the default dashed line that appears when the animated: true prop is applied. I am aware that we can customize the styling by using the following code snippet: ...

javascriptcssreactjsinline-stylesreact-flow

What is the best way to center an <h1> element and align a <p> element to the right within a single div?

My goal is to create a div using Bootstrap 4 that contains an <h1> aligned in the center, with a <p> tag aligned to the right. You can see exactly what I'm aiming for here: https://i.sstatic.net/dhgqX.jpg I am looking for a solution using ...

htmlcssbootstrap-4

Is -webkit-backface-visibility not working in Chrome today?

Today, I encountered a perplexing issue with my project. It was functioning perfectly yesterday, but today it seems to be malfunctioning. (Yes, I have checked previous versions on git.) The problem at hand is that some divs that were previously hidden usi ...

google-chromecsswebkittransform

Implementing user-selected sqlite statements in PHP through a select form: a guide

I've been experimenting with using the $_POST method to retrieve form data and run a SQLite select statement, but I keep encountering an error that says "Notice: Object of class SQLite3 could not be converted to int". Would switching to a $_GET method ...

phphtmlsqlite

How can I implement a dynamic sidebar drawer in Bootstrap for my navbar?

Is it possible to achieve a layout similar to this example: I've come across some online examples using different versions of bootstrap, but they tend to alter the css too much, making it harder to grasp the concepts of bootstrap. I am curious if it ...

htmlcsstwitter-bootstrapbootstrap-4web-frontend

Why does the "error loading page" message appear on the server when there is a PHP function inside jQuery Mobile?

I am facing an issue with a function I created in my jQuery Mobile code. It works perfectly fine on my local machine, but when I host it on the server, it does not work properly. Can someone please assist me? Here is a glimpse of the code: <!DOCTYPE ht ...

phpjqueryhtmljquery-mobile

Retrieve the window.selection() range of a content-editable paragraph, taking into consideration any spans within the paragraph's length

When I click on the plain paragraph text, everything seems to work fine. I can determine the start and end of the selected range without any issues. However, when there is a span element with some styling inside the paragraph text, the end of the range is ...

javascripthtmlvue.js