How can a logo be adjusted in a bootstrap navbar when the browser is resized or when the user zooms in or out?

I have been struggling for the past 4 hours to find a solution to scale an image when the browser is resized. The website I am working on uses bootstrap and the image is located in the navbar-brand section. Typically, navbar-brand is used for a logo, but in this case, there is text underneath the logo which is also part of the image.

My goal is to have this image scale proportionately as the browser size changes. I have experimented with various CSS options, but so far, nothing has worked.

Below is my most recent attempt:

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

Any fresh insights or suggestions would be greatly appreciated!

csstwitter-bootstrap

Answer №1

As pointed out in the comments, the image will occupy a specific percentage (31% in this case) of the navbar width. To achieve this, you can define the width as a percentage for div.navbar-header, which serves as the container for img.navbar-brand. A media query is included to ensure that the added style aligns with Bootstrap's responsive navbar guidelines.

@media (min-width: 768px) {
  .container-fluid>.navbar-header,
  .container>.navbar-header {
    width: 31%; /*31% as referenced in comments*/
  }
  img.navbar-brand {
    width: auto;
    height: auto;
    max-height: 500px;
    max-width: 100%;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg" class="navbar-brand">
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

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

Replace !important with JavaScript/jQuery when using animate()

I need to animate the background-position-x, but there is a background-position: 0 0 !important; set in the css that cannot be removed. Is it possible to work around this using JavaScript? My jQuery code is functioning as intended, but it is being overridd ...

javascriptjquerycss

How to perfectly center an element with a specified aspect ratio

I am experiencing a strange problem when attempting to center an element with aspect-ratio applied. I thought it would work similar to centering an image, but I keep getting stuck with an element of 0px x 0px. https://codepen.io/richardcool/pen/xxeKOwp I ...

htmlcssaspect-ratio

A unique way to present data: An HTML table featuring four fixed columns with horizontal scrolling

I've been having difficulty creating a table with fixed first four columns while allowing the rest to scroll horizontally. I came across this example first column fixed Although the example has the first column fixed, I'm struggling to extend it ...

csshtml-table

How can I create a hover effect for a span element using html and css?

I have encountered an issue with hover color in span classes. I managed to successfully create two classes on this page, but the hover effect is not working on other classes. To troubleshoot, I included a link to my test page below. Can you please review i ...

javascriptcsshtml

Using CSS3 to Create a Pie Chart

Looking to design a symmetrical pie chart featuring 6 pieces, each at 60 degrees, using only html and CSS3. Came across an article , but the concept is unclear to me. Seeking assistance or explanation on the classes mentioned in the link: .pieSliceBlue, ...

css

JS not functioning properly in specific pages causing display issues with page height set to 100%

I am facing an unusual issue where certain pages do not stretch to 100% page height in the middle section, causing the left-hand border to be incomplete. For example, on the 'Brentwood' site (please click on the 'Login' link in the top ...

javascripthtmlcss

ng-deep is causing changes in sibling components

Facing a challenge with Angular Material Design as I discovered the need to utilize ng-deep to customize the styling of an accordion. The issue is that when I use this method, it affects another accordion in a different section which is undesirable. Is th ...

cssangularangular-materialangular7

Guide to display half of an image and allow for full image viewing upon mouse hover

After creating my bootstrap 4 website, I encountered an issue with the code below where only half of the image is displayed initially due to a conflict in the code. It also fails to work properly when moving the mouse after shifting the whole image from ri ...

javascripthtmlcssbootstrap-4

Tips for keeping a span element from breaking onto a new line in responsive web design

Here is a simple list with h4 headings, each ending with a span element. <ul class="items"> <li> <h4>Avoid Line Break Of Plus <span class="goto">o</span></h4> </li> <li> <h4> ...

htmlcssresponsive-designline-breaks

When the screen size is decreased, one card begins to appear behind another card

In my attempt to create a set of responsive cards using Bootstrap, I have written the following code for the cards: <div class="col-xl-4 col-md-6 col-sm-6 p-2"> <div class="card shadow" style=" ...

cssbootstrap-4

Determine the total number of instances an HTML div element is utilized within a PHP script

Having conducted interviews with over 40 individuals, I'm looking to showcase this with a PHP script. Each interview comes with its own set of CSS classes, and adding an extra class or utilizing an existing one can help me determine the total number ...

phpcsshtml

hover effect on CSS dropdown menu that displays all drop-down options

I found this awesome CSS menu on Fiddle that I'd like to share with you: http://jsfiddle.net/DenErello/pQhpu/ Here's the CSS code: .Menu { background-color: #3b69a2; height: 30px; } .Menu, .Menu li { list-style: none; padding: 0; margin: 0; } . ...

cssdrop-down-menuhover

Struggling to integrate a dropdown menu in React

import React, { Component } from "react"; import { Route, BrowserRouter } from 'react-router-dom'; import { NavLink } from 'react-router-dom'; import axios from 'axios'; import Home from "./Home"; import Shop from "./Shop"; im ...

javascriptreactjstwitter-bootstrapbootstrap-4

The justify-content-end feature in Bootstrap 5 appears to be malfunctioning

I have been trying to design a header using Bootstrap 5. I want the navigation links within the header to float to the right side. However, despite applying the justify-content-end class as seen on the Bootstrap website, the items remain aligned to the lef ...

htmlcsstwitter-bootstrapbootstrap-5

Utilizing Express for hosting public static resources

I am having trouble configuring my Express server to serve files from the public folder. Despite trying various file path combinations, Pug does not seem to cooperate with Node.js. While I can view the HTML content of the index, the CSS and music files fai ...

cssnode.jsexpresspug

<a> slightly off-centered horizontal alignment

I've been trying to center a link using different methods like text-align:center and display:inline-block, but it seems to be slightly off-center. I've attached images along with my code below for reference. Any assistance would be greatly apprec ...

htmlcenteringcsstext-alignment

Incorporating Bootstrap into a fresh project

I'm completely new to the world of development, so I'll do my best to phrase this question correctly! Last month, I successfully created my first web application using RoR and Bootstrap for some visual enhancements. Currently, I am working on a ...

htmlcsstwitter-bootstrap

What's causing my Bootstrap cards to overlap on smaller screens?

When using 3 bootstrap cards in the following code, they are perfectly displayed side by side on large screens. However, on medium screens, the cards overlap, and on small screens, they completely overlap. I tried adjusting the class="col-lg-4 col-md- ...

htmlcssbootstrap-5

Maximizing the potential of Bootstrap slider within OpenCart

Has anyone attempted to use Bootstrap slide with the Opencart slideshow module? Here is my code, but I am getting all active classes. Can someone please help me with this? <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"& ...

phpjquerycsstwitter-bootstrapopencart

Is it possible for Masonry to incorporate RTL (Right-To-Left) direction?

Before, Masonry worked perfectly with the Left-To-Right text direction. Now, I need to adjust it for use with Right-To-Left (RTL) languages like Hebrew and Arabic. When I try running Masonry with RTL text direction, the plugin still lays out the grid in a ...

javascripthtmlcssjquery-masonryright-to-left