Increase the size of the logo in the navbar without causing any distortion to the other elements

I am currently facing an issue with my logo placement in the header section of my website. The header consists of a background image with a navbar and logo embedded within it.

HTML

<div class="header">
    <div class="container">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light bg-faded">
                <a class="navbar-brand" href="#"><img src="images/logo.svg" /></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div id="navbarNavDropdown" class="navbar-collapse collapse justify-content-end">
                    <ul class="navbar-nav ">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Register</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</div>

CSS

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

This is how it appears: image

When I try to specify a width for the logo (such as 20em), it increases in size but also affects the positioning of the li items in the navbar. I want the logo to be responsive and not impact the other elements, even on smaller screens.

iamge2

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Answer №1

I've spent a considerable amount of time experimenting with logo sizes on the bootstrap3 navbar, and I have found a method that works well for me.

Initially, I set the desired height for the navbar and ensure that the line-height of li > a matches this height to ensure fixed padding-top and padding-bottom for the links (resulting in vertically centered links).

.navbar {
    min-height: 100px;
}
ul.navbar-nav > li > a {
    line-height: 100px;
}

With the navbar now set at 100px in height and considering padding, I determine that the maximum height for my logo should be 80px to account for padding-top and padding-bottom requirements. Assuming the logo has dimensions of 200px width and 80px height, I assign the img the "logo" class.

<a class="navbar-brand" href="#"><img src="#" class="logo" alt=""></a>

To maintain consistent padding, I add 10px of padding-top to the logo.

img.logo {
    padding-top: 0px;
    width: 200px;
    height: auto;
}

If you desire different logo sizes, simply adjust the navbar min-height/line-height and adjust the logo width/padding accordingly.

Check out the Bootstrap 3 fiddle here: https://jsfiddle.net/yghg5hsx/

Explore the Bootstrap 4 fiddle here: https://jsfiddle.net/973Lde7j/3/

Answer №2

Place your company logo in a separate div and organize the rest of the navigation bar content in another div.

Here is a suggestion to implement this:

#navbar { width:100%}

#logoDiv { width:20% }
#contentDiv { width:80% }

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

Can Javascript be used to open a new window, send POST parameters to it, and pass the request as application/json?

I have a browser client application built with JavaScript that manages a large amount of state data. Sometimes, this data needs to be organized into a structured object and sent to a new window for further processing. Currently, I am using a solution wher ...

javascripthtmljsonforms

Tips for transferring simple CSS formatting to an independent stylesheet

As part of a university project, I am working on a basic website. Initially, I used in-line styling for the website design. However, the subject coordinator has now changed the requirements and we are only allowed to use an external CSS stylesheet. Most of ...

htmlcss

Creating a well-structured HTML layout following the BEM Methodology

I'm unsure about this HTML structure. Does it follow the BEM approach correctly? <div class="boxWithBorder"> <div class="header"> <h2 class="boxWithBorder__element"></h2> </div> </div> In my opinion, it sh ...

htmlbem

Creating Shadows in Swift with Xib for TableView

I am currently working on: Attached is a screenshot from an iPhone: This is the code snippet in question: cell.shadowLayerView.layer.masksToBounds = false cell.shadowLayerView.layer.shadowOffset = CGSize(width: 0, height: 0) cell.shadowLayerView.layer.s ...

ioscssswiftuitableview

the radio selection buttons are malfunctioning

In a section, there are checkboxes that, when clicked, display radio button options specific to that checkbox. Each checkbox is associated with an array item. <form id="lab_test_detail"> {item.subcategory.map((item, index) => <& ...

htmlreactjs

Using JQuery, we can add CSS to a DIV if it has a specific height

Can this be achieved? If the DIV inside the page is greater than 600 px, change the background color of #TWO to red Using JQuery I tried implementing this but it's not working correctly: <script type="text/javascript> $(document).ready(funct ...

javascriptjquerycss

Tips for clearing out text in a <p> tag with javascript when it exceeds a specific length of 100 characters

Is there a way to automatically truncate text to (...) when it exceeds 100 characters inside a paragraph with the class .class? For instance, if I have a long paragraph like this: <div class='classname'> <p>Lorem ipsum dolor sit ame ...

javascripthtmlcsstypescript

Issue encountered while determining the specificity of a CSS selector involving pseudo-classes

As I delved into a tutorial on MDN, an intriguing code snippet caught my attention: /* weight: 0015 */ div div li:nth-child(2) a:hover { border: 10px solid black; } An unanswered question lingers in my mind: Why does this rule's specificity displa ...

htmlcsspseudo-classcss-specificity

What is the best way to customize the woocommerce.css file in the parent theme?

Currently, I have incorporated an ecommerce-friendly wordpress theme for my website in conjunction with woocommerce. To customize the design, I created a child theme and transferred the woocommerce.css file from the plugin into the css of the child theme, ...

csswordpresswoocommerce

View content from an external file within an iframe

My goal is to showcase a text file within an iframe that updates automatically every second. To achieve this, I have created a simple function: function refresh() { $("#derek").attr('src', $("#derek").attr('src')); }; The automati ...

javascriptphpjqueryhtmliframe

Tips for eliminating excessive line breaks when incorporating a table tag into nl2br

In my dataset, I have content that consists of plain text, codes, and tables interchangeably. To keep the database optimized, I have limited the use of HTML tags by excluding pre tag for table and text, reserving it only for codes (spaces do not need to b ...

javascriptphphtmlnl2br

Alert: CSS 4.0 Warning Validation - The value "rgb(0, 0, 0, 0.4)" is not valid for the "border" property

Wrapping up my asp core 3 project, I've been addressing various warnings that have popped up. However, one particular warning has me stumped. The CSS property in question is functioning perfectly, adding a touch of transparency to the black border. Wh ...

cssasp.net-core

What is the best way to style only numbers using CSS in jQuery?

Here is some HTML code that needs styling: <tr> <td>Test</td> <td>324</td> </tr> The default CSS setting is text-align:left However, I am looking to apply text-align:center to any <td> element that contai ...

javascriptjquerycss

CSS Opacity Issue

Why is the article transparent? Despite my efforts to search online for similar instances, I am surprised at not finding anything and feeling quite puzzled about what steps to take next. body { background-color: #000000; opacity: 0.8; background-i ...

htmlcss

Adding an arrow between two divs in html and css

I am looking to add an arrow between two divs. Here is an example image for reference: https://i.sstatic.net/Sl5A8.png This is my current setup: <style> .link{ font-size: 14px; margin-bottom: 10px; } ...

htmlcss

Overlay a div on top of an image in an HTML email

To display text over an image in HTML email, I am looking for a solution since using margin or position is not working as required. Below is the code snippet I have tried: <div style="padding-right:25px;padding-left:20px"> <div style="padding-t ...

htmlcsshtml-email

Utilizing JavaScript and PHP to dynamically load HTML content on a webpage

Below is the code snippet I'm working with: <?php if ($x == 1){ ?> <b>Some html...</b> <?php } else if ($x==2){ ?> <b> Other html...</b> <?php } ?> Now, I want to create two links (a ...

phpjavascriptjqueryhtml

Having trouble with the link attribute not functioning properly for a radio button in Chrome?

<a> hyperlink for radio button is not functioning correctly in Chrome. Here is the code segment in question: <td width='7%' bgcolor='#E8E8E8'> <a href='issue.php?admin=Yes&&user=$user'> <inp ...

html

Is there a way to make the text on my Bootstrap carousel come alive with animation effects?

My website features a Bootstrap Carousel with three elements structured like this: <a><img data-src="img" alt="Third slide" src="img"> </a> <div class="carousel-caption"> <h2> <u ...

javascriptjqueryhtmlcsstwitter-bootstrap

The container stays vacant as the bootstrap modal gracefully appears with a fading effect

I am trying to implement a basic bootstrap modal into my project, but I am encountering some issues with the code. When I click the "Launch demo" button, the modal fades in as expected, yet the container supposed to contain the ".modal-header", ".modal-bo ...

jqueryhtmltwitter-bootstrapmodal-dialog