What is the best way to incorporate a logo container and a horizontal divider into my top navigation bar using Bootstrap?

I'm currently working on designing a top navigation bar that features a logo with color #1 as the background on the left side. The logo is then separated by a grey horizontal divider, followed by color #2 representing the application name beside the divider. Despite my efforts, I've only managed to include the logo and a single top navigation background color. I'm struggling to figure out how to properly divide the navigation bar as desired.

HTML:

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">

</head>




<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img alt="My Logo" src="my-logo-png-transparent.png">
                </a>
            </div>
        </div>
    </nav>



</body>


<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
<script src="dashboard_static/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c3f2920292f387e0c78627c627d7e">[email protected]</a>/dist/js/select2.min.js"></script>

<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>





</html>

CSS:

nav {
    background: #282829;
    border-bottom: 2px solid #999999;;
}

img {
    height: 27.5px;
    width: 23.6px;
}
javascripthtmlcss

Answer №1

Are you looking for something similar to this example?

index.html

 <nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header nav-logo">
            <a class="navbar-brand" href="#">
                <img alt="My Logo" src="https://via.placeholder.com/30/">
            </a>
            <span>NAME</span>

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

style.css

.navbar {
background: blue;
border-bottom: 2px solid #999999;
padding: 0px;
}
.container-fluid{
padding: 0px;
}
.navbar-brand {
background: red;
border-right: 2px solid grey;
padding: 20px 30px;
}

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

Search Result Causing Navbar to Break in Bootstrap Framework

While working on implementing the search functionality with AJAX and PHP, I encountered an issue where displaying the search results breaks the navbar layout. https://i.sstatic.net/FctpA.png this is the navigation bar code <nav class="navbar ...

phphtmlcssajaxtwitter-bootstrap

Karma is unable to locate the module within the specified relative path

I'm facing a challenge with Karma not being able to load a specific file. As a novice in Karma, I dedicated the entire day to researching and checking documentation for similar issues with no luck. Upon initiating the karma process, it encounters an ...

javascriptnode.jsunit-testingkarma-runnerbrowserify

Combining Various Data Types in a Flexible List

I'm looking for a way to dynamically add rows to a table. Right now, I have the input type on the server (whether it's int, bool, string, etc), but I want to know how to implement a field accept combobox. Here is the code in cshtml: <tr ng-r ...

javascriptangularjs

How can I save a PDF file using React?

My webpages contain several tables, and I am looking to add a dropdown feature that allows users to choose between saving the table in either PDF or Excel format. These tables are dynamically generated with the header structured in array form and data sto ...

javascriptreactjsnpmreact-hooks

Automatically resize ui-select dropdown box to the left side

I've been tasked with incorporating AngularJS ui-select into my project, specifically creating a multiselect dropdown. Currently, the dropdown box automatically adjusts its width based on the length of the longest selectable text, causing it to extend ...

javascripthtmlcssangularjsui-select

Steps for adding a user-glyphicon within an img tag

In the given code, I am trying to create a function where if no photo is uploaded, a default bootstrap glyphicon-user image should be displayed. Once a photo is uploaded, it should overwrite the default image. //Please ensure necessary Bootstrap files are ...

htmlcsstwitter-bootstrap

Exploring Multilingual Autocomplete or: Best Practices for Managing Multiple Languages in Web Applications

I'm currently developing a website and I have a mysql-table named 'items' with the following structure: item_id | item (The second column is used to identify the item_id.) In a file called language1.php, I have an array that stores the it ...

javascriptphpmysqllocalization

How can I ensure that the state is only updated after the map function has finished executing in React?

I am encountering an issue with updating the state after mapping over an array of ids using an async function. The goal is to store the result in newArr and then update the state via setState. However, the state is being updated before the mapping operatio ...

javascriptreactjsreact-nativeasynchronousasync-await

Achieve perfect alignment of an HTML table by positioning it precisely 36 pixels away from the right edge of the window

I'm struggling to achieve a table that is precisely 36px away from both the left and right edges of the browser window, regardless of CSS. While I can easily set the left margin, getting the exact right margin seems impossible as the `margin-right` CS ...

htmlcsscss-tables

activate the bootstrap popover by double-clicking instead of a single click

Clicking on a certain div triggers a popover to display another div, which works initially. However, once the popover is removed by clicking outside the div, it requires two clicks to trigger the popover again. How can this be fixed so that it always works ...

javascriptjquerycssbootstrap-4

What is the process for sending an InMemoryUploadedFile to my S3 storage?

My upload form is quite simple and includes an image as a FileField: def post(request): if request.user.is_authenticated(): form_post = PostForm(request.POST or None, request.FILES or None) if form_post.is_valid(): inst ...

javascriptpythonjquerydjangoamazon-s3

Designate categories by utilizing the x-amz-tagging request header

I'm in the process of creating a Node program to upload files to aws s3, and I'm having trouble figuring out how to specify the x-amz-tagging with the request header. I attempted a solution, but it's not working as expected! function crea ...

javascriptnode.jsamazon-web-servicesamazon-s3http-post

Utilizing AngularJS to iterate through an array of dictionaries

Within a specific section of my HTML code, I am initializing a scope variable like this: $scope.my_data = [ { c1: "r1c1", c2: "r1c2", c3: "r1c3", ...

javascriptangularjs

Is there a way to determine if a user has the ability to navigate forward in Next.js?

I am faced with a challenge of determining whether a user can navigate forward on a webpage. My goal is to have two buttons - one to go back and another to go forward, with the forward button disabled when navigation is not possible. For the back button f ...

javascriptreactjsnext.js

I must determine whether the contents of an array exceed zero

THE SUMMARY: I have three value numbers for an array. If the total addition of the array's elements is greater than 0, I need to display "el funcionamiento no es infinito", otherwise "es infinito". It seems that it's not working because I belie ...

javascriptarraysobject

Switch from using jQuery to vanilla JavaScript for handling POST requests

I am looking to eliminate the jQuery dependency and use plain JavaScript instead in the code below for a post request. <script type="text/javascript> $(function() { $.post("test_post.php", { name: "John Doe", ...

javascriptjquery

Serve static assets files based on the route path instead of using absolute paths

Within Express, I have set up the following route: app.get('/story/:username', function(req, res){ res.render('dashboard.ejs'); }); Prior to that, I am serving any static files located in /public: app.use(express.static(__dirname ...

javascriptnode.jsexpress

Pass information from an array of objects to a visual component

My objective is to display 3 instances of the SearchItem component from locations[0].results[0] and 3 instances from locations[0].results[1] I have an array containing objects with data that I want to display in my SearchItem component: const locations = ...

javascriptreactjs

The method for transferring text box values to the next page using a hyperlink in JSP is as follows:

Is there a way to pass the values of a text box in a JSP through a hyperlink on the same page? I want to achieve this but am not sure how. ...

javajavascriptjspservlets

Creating properly formatted HTML strings using C#

Does anyone know of a C# equivalent to the Beautify Code function found on ? For example, I have this string: <div><div><input type="radio" value="radio" id="radio_0">Radio</div><div><input type="radio" value="radio" id="r ...

c#htmlformattingstring-formatting