Present two logos on either side of a navigation bar with Bootstrap in between

I am facing an issue with the display of my two logos. One logo is supposed to be in the right corner and the other in the left, but the right logo is not appearing correctly.

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="./" class="navbar-brand"><img src="applicatie/img/menu_icon.gif" class="img-responsive" alt="BB" height="50" width="50"></a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
        <ul class="nav navbar-nav">
            <li id="home">
                <a href="./index.php">Home</a>
            </li>
            <li id="bands">
                <a href="./bands.php">Bands</a>
            </li>
            <li id="jeugdhuizen">
                <a href="./jeugdhuizen.php">Jeugdhuizen</a>
            </li>
            <li>
                <a href="./phpBB3/index.php" target="_blank">Forum</a>
            </li>
            <li id="over">
                <a href="./over.php">Over Bandbook</a>
            </li>
            <li id="registreer">
                <a href="./signup.php">Registreer</a>
            </li>
            <li>
                <form class="navbar-form navbar-right" id="loginoutform" role="form" action="./verwerklogin.php" method="post">
                    <div class="form-group" id="usernamediv">
                        <label class="sr-only" for="username">Username: </label>
                        <input type="text" id="username" name="username" placeholder="Username" class="form-control">
                    </div>
                    <div class="form-group" id="passworddiv">
                        <label class="sr-only" for="password">Password: </label>
                        <input type="password" id="password" name="password" placeholder="Password" class="form-control">
                    </div>
                    <button type="submit" class="btn btn-success" id="signin">Sign in</button>
                </form>
            </li>
        </ul>
    </nav><!-- /.navbar-collapse -->
    <a href="./" class="navbar-brand pull-right"><img src="applicatie/img/menu_icon.gif" class="img-responsive" alt="BB" height="50" width="50"></a>

</div><!-- /.container -->

This is the CSS code that I am using:

 .navbar-inverse { background-color: white;}
   .navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #B84E1A}
   .navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #912C13}
   .navbar-inverse .navbar-brand { color: white; font: 42px playbill, onyx, fantasy; text-align: center; padding-top:0px;}
   .navbar-inverse .navbar-brand:hover { color: #B84E1A}
   .navbar-inverse .navbar-nav>li>a { color: #999999}
   .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FFFFFF}
   .navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF}
   .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}

   body
   {
       padding-top: 50px;
       background-color:#000000;
   }

Answer №1

Indeed, as mentioned by @Mrd05d, this method appears to be effective.

</ul>
<a href="./" class="navbar-brand pull-right">
<img src="applicatie/img/menu_icon.gif" class="img-responsive" alt="BB" height="50" width="50">
</a>
</nav><!-- /.navbar-collapse --> 

This arrangement will position the image all the way to the right, but it will still have some padding on the right side due to being inside a container.

If you desire for it to be positioned at the top right corner (not aligned with the menu at all), you can utilize absolute positioning.

.logo-right{
position:absolute;
top:0;
right:0;
}

Answer №2

Oops! You mistakenly closed the nav before the second logo instead of after it...

</nav><!-- /.navbar-collapse -->
<a href="./" class="navbar-brand pull-right"><img src="applicatie/img/menu_icon.gif" class="img-responsive" alt="BB" height="50" width="50"></a>

The correct order should be:

<a href="./" class="navbar-brand pull-right"><img src="applicatie/img/menu_icon.gif" class="img-responsive" alt="BB" height="50" width="50"></a>
</nav><!-- /.navbar-collapse -->

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

The problem of SVG rendering order requires a solution that does not rely on javascript

I am new to experimenting with inline svg, and I wanted to share my code: <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="350"> <defs> <style> .ring { transform-origin: 175px 175px; } ...

Issues with scrolling divs not properly reaching the bottom of the content

I am facing an issue with 2 scrolling divs (outlined in red) that refuse to scroll to the bottom. I cannot seem to pinpoint what needs to be adjusted to resolve this problem. The thick outlined box represents a simulated browser window. View the code her ...

Toggle the selection of a div by clicking a button in AngularJS with a toggle function

I have several div elements on a webpage. Each div contains a button! When the button is clicked for the first time: The border color of the div will change to blue (indicating the div is now selected). The "ok" button will be hidden (leaving only t ...

Transforming JSON data into an HTML template

Incorporating Angular 6 in my project, I have come up with the following templates: Header, Left panel, Body part, Footer Header, Left panel, Body part, Right panel, Footer Header, Body part, Footer Considering the numerous templates, I am aiming to tran ...

JavaScript: utilizing 'this' and onClick events

Recently, I created a basic slideshow with 4 images where upon clicking, the selected image displays in a larger div box. The functionality is quite straightforward, but if you have any queries, feel free to ask. As of now, with only 4 images in the slides ...

Styling an HTML Table with CSS to Add Cell Padding

I am trying to add padding to a single cell in my table. I created a class for the td element and specified its style in my CSS file as shown below: .itemQuantity { padding-right:30px; text-align:right; background-color: #EEE; } However, the ...

Adding a hyperlink to each table cell (td) in HTML and CSS that is visible outside of the table

In my table, there is a link on every td. I want these links to appear outside the table. Although I have achieved this, the first cell that was created needs to be hidden. When I try to hide the td using CSS, the link also disappears. Here is the HTML: ...

Tips for aligning a div below another div nested within a separate container

Can I position div#d2 directly beneath the div#d1 container according to the code below, instead of positioning it outside the height of the wrapper? #wrapper { height: 100%; display: flex; background-color: steelblue; align-items: center; min ...

To trigger a Bootstrap 5 modal in a child component from a button click in the parent component in Angular without the need to install ng-bootstrap is possible with the following approach

To achieve the functionality of opening a modal in a child component upon clicking a button in the parent component without using ngx-bootstrap due to restrictions, one approach is to add data-bs-target and data-bs-toggle attributes to the button. Addition ...

Center an image vertically and horizontally within a div element inside a container, even if the image sizes and aspect ratio differ, while also including padding

I am looking to vertically align images with varying ratios, where the image may be larger or smaller than the content and also include padding; I have tried different solutions found here, but none seem to cover all my requirements; I specifically need i ...

Utilizing Javascript / jQuery to eliminate specific CSS styles

I am facing an issue with the CSS code for a table positioned at the bottom of the screen. The current code includes a filter specifically for IE 8, but I need to make it compatible with IE 10 as well by removing the filter and adding a background color. ...

Position a div container to be aligned at the bottom of an image

I'm having trouble aligning a div container at the bottom of an image. I attempted to modify the position attribute of the image and set its value to "relative." It's a bit challenging to explain, but here are snippets of HTML and CSS code with ...

Styling targeted div class elements with specific input elements

I have a group of input text elements on my webpage. I am looking to style the div element with the "forms_in_ap" class that contains the #email, #reEmail, #nogInFirstName, and #nogInAccNumber elements specifically for Safari browsers on MAC and IOS device ...

Hosting services and content management system for a website built with Twitter Bootstrap

Embarking on a new venture to create a website for a Custom Home Building company, I am eager to learn and grow in web development. Although I have some programming experience, please bear with me as I ask my newbie questions. I have been searching high a ...

Animate objects as they move along the page

Modern websites often incorporate animations into their designs. I had the idea to animate elements as we scroll down the page, using a combination of JQuery, HTML, and CSS. <div class="noanimate imgleft"> </div> <div class="noanimate img ...

The animation of the splash screen in Angular is quite jarring and lacks fluidity

I am experiencing some issues with my angular splash screen animation. It works perfectly when there is no activity in the background, but when I simulate a real-life application scenario, the animation becomes stuttered, choppy, or sometimes does not anim ...

What is the best method for restricting the visibility of an animation to specific regions within an SVG?

I am seeking assistance with adding a "shine" animation to my SVG. I want the animation to only appear within specific parts of the SVG, but I'm uncertain about how to achieve this. Below is what I have accomplished so far. The aim is for the white ...

Is there a way to create a timed fadeIn and fadeOut effect for a div using HTML and CSS?

I have a single div that initially displays text, and I want it to fade out after a specific time so that another div will then fade in. However, my attempt at coding this transition is not producing the desired result: $(function() { $(".preloa ...

Ways to create an overlapping effect for 3 elements using CSS

There are 3 elements in my setup: <div class="foo"></div> <div class="bar"></div> <div class="foobar"></div> I am looking to have .foo overlap .bar, .bar to overlap .foobar, and .foobar to overlap .foo. This is the de ...

Problem with loading images on an HTML webpage

https://i.sstatic.net/aQ0oD.png After refreshing the page, I'm encountering an issue where the image is not loading. However, if I switch tabs from MEN to WOMEN and back again, the image will display without any problem. Even making changes in the CS ...