Expand the width of the navbar brand icon

Currently working on a landing page project and noticed that my logo appears too small, utilizing Bootstrap 5

style.css

...
.navbar-brand {
  width: 3.5rem;
  padding: 0 0;
  margin: 0.3rem 0;
  position: relative;
}

.navbar-brand img {
  width: 100%;
  height: auto;
}

body .navbar-brand .logo-dark {
  display: none;
}

body.dark-layout .navbar-brand .logo-light {
  display: none;
}

body.dark-layout .navbar-brand .logo-dark {
  display: block;
}

@media (min-width: 576px) {
  .navbar-expand-sm .navbar-brand {
    width: 4.5rem;
  }

  .navbar-expand-sm.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
    transform: translateY(-100%);
  }

  .navbar-expand-sm .nav-item {
    height: 4.5rem;
    display: flex;
    align-items: center;
  }

  .navbar-expand-sm .nav-item:not(:first-child) {
    margin-left: 1.25rem;
  }
}

@media (min-width: 768px) {
  .navbar-expand-md .navbar-brand {
    width: 4.5rem;
  }

  .navbar-expand-md.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
    transform: translateY(-100%);
  }

  .navbar-expand-md .nav-item {
    height: 4.5rem;
    display: flex;
    align-items: center;
  }

  .navbar-expand-md .nav-item:not(:first-child) {
    margin-left: 1.25rem;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-brand {
    width: 4.5rem;
  }

  .navbar-expand-lg.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
    transform: translateY(-100%);
  }

  .navbar-expand-lg .nav-item {
    height: 4.5rem;
    display: flex;
    align-items: center;
  }

  .navbar-expand-lg .nav-item:not(:first-child) {
    margin-left: 1.25rem;
  }
}

@media (min-width: 1200px) {
  .navbar-expand-xl .navbar-brand {
    width: 4.5rem;
  }

  .navbar-expand-xl.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
    transform: translateY(-100%);
  }

  .navbar-expand-xl .nav-item {
    height: 4.5rem;
    display: flex;
    align-items: center;
  }

  .navbar-expand-xl .nav-item:not(:first-child) {
    margin-left: 1.25rem;
  }
}

@media (min-width: 1400px) {
  .navbar-expand-xxl .navbar-brand {
    width: 4.5rem;
  }

  .navbar-expand-xxl.headroom--not-top:not(.headroom--pinned):not(.headroom--bottom) {
    transform: translateY(-100%);
  }

  .navbar-expand-xxl .nav-item {
    height: 4.5rem;
    display: flex;
    align-items: center;
  }

  .navbar-expand-xxl .nav-item:not(:first-child) {
    margin-left: 1.25rem;
  }
}

.navbar-expand .navbar-brand {
  width: 4.5rem;
}
...

Snippet from my html file

[![...
<body>
  <nav class="navbar navbar-expand-lg navbar-transparent navbar-sticky navbar-light">
    <div class="container-fluid px-xl-0 mx-xl-5">
      <a class="navbar-brand" href="index.html">
        <img src="{{ url_for('static', filename='images/logo-no-background.svg') }}" alt="" class="">

      </a>
...][1]][1]

Answer №1

the size of your navbar-brand is not changing because it is set to display:inline, which is the default for the <a> tag .

To make the width take effect, you can add display:block to the navbar-brand:

.navbar-brand {
    width: 3.5rem;
    padding: 0 0;
    margin: 0.3rem 0;
    position: relative;
    display: block;
}

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 inner div's CSS margin-top is causing the parent div to be pushed downwards

I am looking to move the child div downwards by 5px inside the parent div. Setting margin-top:5px; on the inner div causes both the inner and parent divs to be pushed down from the div above the parent div, rather than just moving the inner div down from t ...

Implementing jQuery .load to effectively extract the Title tag from HTML code

I am currently utilizing .load to fetch and load pages, as well as modify their window titles. The page loads successfully; however, the main issue I am facing is my inability to extract the title from the HTML code present in the response. Below is the c ...

Set the <img> source to link to a PHP webpage

I store all my images in a secure directory inaccessible to normal users. The filenames are generated randomly, so I want to keep the path and names of the files hidden. Currently, my img element looks like this: <img src="get_image.php?id=1"> This ...

Struggling with generating forms using AJAX, Javascript, and HTML depending on the selection made from a drop-down menu

I am in need of a simple web form for work submissions within my organization. These submissions will fit into 4 Categories, each requiring unique information. Currently, I have a basic form set up with fields such as Requested Name, Requested Date, Acquis ...

Utilizing scrapy and python to gather information on attractions from Tripadvisor

Struggling to extract the names and addresses of attractions from TripAdvisor using web scraping. The suspicion is that there might be an issue with how product.css(...) is written (possibly related to jsons?). Seeking guidance on correcting the code in o ...

Issue with Bootstrap landing page layout - Container not adjusting to screen size correctly

Currently, I am engaging in a project to develop a landing page using Bootstrap as part of my practice. Unfortunately, I encountered an issue with the layout as the container does not align properly with the screen size. This imbalance causes the screen or ...

Utilize the Booststrap v5 textform class "form-label" to prepopulate data for easy copying to the clipboard

Trying out Bootstrap 5? Check out this guide: https://getbootstrap.com/docs/5.3/forms/form-control/ I want to create a text area with pre-populated text and add a button for copying the text to clipboard. Here's Method 1: The sample code from Boots ...

How can I retrieve the results of an SQLite call in HTML5 without passing them to a separate function?

How can I use SQLite in HTML5 to execute a call like the one below, so that the result is returned immediately rather than passed off to another function? try { mydb.transaction( function(transaction) { transaction.executeSql( &apo ...

Creating a unique CSS grid layout with custom borders

Just a quick question, I'm wondering how you would approach creating this type of effect using CSS? https://i.sstatic.net/rYCJn.png The concept revolves around building the grid using bootstrap. As the screen size decreases, the grid transitions to ...

The height of the TinyMCE editor refuses to adjust

Hello, I'm new to utilizing Tinymce within an AngularJS environment. Specifically, I am working with the Tinymce library version 4.3.13. I have constructed some HTML and angularJS code to implement the Tinymce editor, but I've encountered a probl ...

CSS fluid layout with three columns

I am attempting to create a 3-column layout where each column has a fluid width of 33% and height of 50%. However, when I add padding to the columns, it causes the last div to move to the next line. How can I resolve this issue? Example HTML: <div id= ...

How can I adjust the height of an iframe dynamically using AngularJS?

I wrote a function that resizes the height of an iframe element to always be 100% after it loads: app.directive('iframeAutoSize', [function() { return { restrict: 'A', link: function(scope, element, attrs) { ...

"Troubleshooting: jQuery Find function not functioning correctly with HTML template

I am having trouble with a Shopify liquid code that I am trying to load into an HTML template <script type="text/template" id="description"> <div class="product-ddd"> {{ product.description }} </div> ...

When receiving a GET response after a server crash

Question: I am sending a Get request through Ajax every second and waiting for a response from the server. However, if my application crashes and I keep sending requests every second, I only receive a server timeout error (HTTP status code 502) with no oth ...

Alignment issue with Bootstrap dropdowns noticed after dynamically loading dropdown content in Blazor

When working with Blazor, you have the ability to dynamically load content by enclosing it within an @if block and then setting the condition to true, such as when a button is clicked. Recently, I encountered an issue with a Bootstrap dropdown in my proje ...

How to create a CSS-only dropdown menu for IE 6 without relying on JavaScript?

While browsing different sites, I came across numerous css/js menu scripts that function well in browsers such as FF, IE7, Safari, and Opera when JavaScript is enabled. However, they do not work properly in IE 6 without a small JS file added to support t ...

The "read more" button seems to be malfunctioning

I've been working on integrating a gallery of images into my posts. My goal is to display 4 images initially, followed by a "load more" button that, when clicked, will reveal another set of 4 images, and so on. I have already created the HTML, CSS, an ...

Jquery Error in Bootstrap and DataTables Integration

My knowledge of frontend coding is limited, so please bear with me. Initially, my website was using MVCContrib grid along with its own CSS style. Recently, I switched to Bootstrap which caused MVCContrib to stop working. I've been struggling to integ ...

The dropdown menu disappears when I hover over the tab, making it impossible for me to navigate it in the react app

My navigation component includes a Games tab with a dropdown menu that appears when you hover over it. However, I'm facing an issue where the dropdown menu closes before the user can transition from hovering over the games tab to the actual dropdown m ...

Unusual div image alignment when dimensions are dynamically adjusted with Javascript animations

I have created a basic webpage using JavaScript that aims to scale an element from the center of the page over time when clicked. It is functioning properly for the SVG element I tested it with. However, when I use an image, it initially appears outside o ...