Tips for placing the brand logo on the left edge of the Bootstrap 4 navbar

I am facing an issue with the placement of my logo. The code snippet below shows how it currently looks:

<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="container-fluid">
    <img class="navbar-brand" src="logo.png" alt="logo">
    <ul class="nav navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">START</a></li>
      ...
    </ul>
  </div>
</nav>

There seems to be some padding on the left, causing the logo to not align perfectly with the edge as shown in the image https://i.sstatic.net/L5dkl.png.

My goal is to have the circular logo positioned precisely at the edge to create the illusion of a real circle extending outside the browser window. I attempted using a negative margin on the left side, but it did not solve the issue, resulting in the image appearing incorrectly aligned like in the following image https://i.sstatic.net/001oS.png.

Can anyone provide guidance on how to resolve this issue?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Instead of using container-fluid, you can opt for row. These two options have different margins.

Check out this example on JsFiddle

<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="row">
    <img class="navbar-brand" src="logo.png" alt="logo">
    <ul class="nav navbar-nav">
      <li class="nav-item"><a href="#" class="nav-link">START</a></li>
      ...
    </ul>
  </div>
</nav>

Answer №2

Eliminate the left padding from .navbar-brand and 

.container-fluid.navbar-container
(avoid overriding the styles of .container-fluid, so create a new class for it).

HTML

<nav class="navbar navbar-fixed-top navbar-light bg-primary">
  <div class="container-fluid navbar-container">
    <img class="navbar-brand" src="logo.png" alt="logo">
  </div>
</nav>

CSS

.container-fluid.navbar-container, .navbar-brand {
  padding-left: 0;
}

Check out the working example here: https://jsfiddle.net/9t20dmLk/1/

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

When a class and ID are dynamically applied, the click event may not fire and the CSS may not be applied

Hey everyone, I am facing an issue with declaring id and class when creating a table dynamically. I have tried multiple functions to make my click event work but without success. Can anyone help me with this? Below is the code for my dynamic table where I ...

javascriptjquerycssdynamicclick

Angular.js, require.js, and jQuery Plugin all combined to create a uniquely customized directive

As a newcomer to Angular and Require, I am seeking assistance with the following code snippet. Despite successfully integrating Angular and Require, I am facing an issue where the bootstrap-switch element fails to initialize: define(['myapp.ui/module ...

javascriptjqueryangularjstwitter-bootstrap

Customizable form with dynamic content and interactive button within a set location

One distinct challenge not addressed in the similar inquiries below relates to a FORM component with both a variable segment and a fixed footer for submit buttons. The objective is to present: A header (a table set to 100% width including a logo and tex ...

htmlcssformsflexbox

Angular HTML is throwing an error related to object arrays

Is there a way to display only specific fields of an array? <div class="form-check" *ngFor="let periodo of filterPeriodos()"> <div>{{periodo.periodos | json}}</div> <input class="form-check-input mr- ...

javascripthtmlangular

Struggling to position a div below another div within a flex box layout

https://i.sstatic.net/8vZSW.jpg When trying to make the Information & advice header appear above the other div elements, I encountered an issue with flexbox. Despite setting the container div to have a flex direction of column, the header div continue ...

htmlcssangularflexbox

Enable/disable specific dates in datepicker depending on dropdown selection

Struggling with disabling specific days of the week in the jQuery datepicker based on a selected dropdown option. Provided below is the snippet of my HTML and JavaScript code: <script> $("#dates").datepicker({ minDate: 0 }); </sc ...

javascriptjqueryhtmldatepicker

Generating numerous div elements with jQuery's zIndex property

While attempting to create a function that runs on the $(document).ready() event and is supposed to generate a new div, I encountered an issue. Whenever I try to create another div with the same DOM and Class attributes but in a different position, a probl ...

javascriptjqueryhtmlcss

Adjusting the overflow of a parent div based on the position of the div within it by scrolling

I'm trying to create a page with 3 different sections: <div class="container" id="main-container"> <div class="section" id="profile"> Hello World </div> <div class="section" id="projects"> Hello World 2 ...

javascriptjqueryhtmlcss

Unleashing the power of Bootstrap 4 NPM package.json metadata

According to the Bootstrap 4 alpha documentation: In Bootstrap's package.json file, there are additional metadata keys: sass - points to Bootstrap's main Sass source file style - indicates the path to Bootstrap's non-minifie ...

twitter-bootstrapnpmpackage.jsonnode-sass

How to retrieve the value from an editable td within a table using Jquery

I am working with a dynamic table that looks like this: <table> <tbody> <tr> <td>1</td> <td contenteditable='true'>Value1</td> </tr> <tr> ...

javascriptjqueryhtmlhtml-table

Making the child element expand to the full width of its parent while maintaining an overflow-x:auto property

Is there a way to stretch a child div without specifying fixed widths? Even when trying to wrap items and child in one wrapper div, the child div always takes up 100% width. Not full horizontal width. Thank you. .parent { background: skyblue; widt ...

css

Tips for displaying the number of selected values in a select box label (e.g. Choose an Option)

I am currently using the jQuery multiselect API in my application to allow users to select multiple values. However, I am facing an issue where I need to fetch all the selected values when a button next to the multiselect box is clicked. Unfortunately, I h ...

javascriptjqueryhtmlcss

The issue of the background image not updating with jQuery persists in Internet Explorer 11

Hello everyone, I am facing an issue where I am trying to change the background image of a div using jQuery on click. The code I have written works perfectly on all browsers except for IE. Can someone please provide me with some guidance or help on how to ...

javascriptjqueryhtmlcss

Display Content in a DIV When Form Field is Unfocused

After hours of searching, I still haven't found a solution! I am trying to create a form field (text) where users can type in text. I want the text they enter to appear in a div on the screen either as they type or after they finish typing. Maybe thi ...

javascriptjqueryhtml

Show identification as an alternative term in the chart

Is there a way to display an id in a table cell as another name from a different object with corresponding ids? I want to achieve something like this if it's possible: <td class="tableRowText"><p>{{l.SenderId}}</p></td> simil ...

htmlangularjs

Troubleshoot mobile overflow-x problem when expanding div beyond container boundaries

Recently, I experimented with a method to extend the background-color of my div outside its container. Everything was working fine except for the fact that applying overflow-x to the body on mobile browsers didn't completely disable horizontal scrolli ...

htmlcssmobileresponsive-design

AngularJS Bootstrap CSS implementation for Hand Cursor Grab

Is there a way to ensure the cursor is always a hand / grab for sortable containers in AngularJS & Bootstrap? What specific HTML modification would achieve this change? <div ui-sortable="sortableOptions" ng-model="responses" class="container-f ...

cssangularjstwitter-bootstrapcursor

Having trouble embedding Hangouts button in HTML template using script tags

When I include a Hangouts button on my index page, it is visible and functional as expected: <body ng-app="sampleApp" ng-controller="MainCtrl"> <div class="row"> <div class="col-md-12 m-body"> <div class="m ...

javascripthtmlangularjsgoogle-hangouts

"Efficiently fetch data with an Express GET request without the

My goal is to send the client the HTML page (create.html) in response to a GET request triggered by a button click using fetch. I am intentionally avoiding the use of a form due to formatting and potential scalability issues. The code acknowledges that the ...

javascripthtmlexpressgetfetch

Creating a dropdown navigation menu

I am trying to create a smooth slide down menu effect, but it seems to instantly expand with no transition. Can anyone help me troubleshoot this issue? const Container = styled.section` position: relative; overflow: hidden; ` const WrapperItems = st ...

cssreactjs