I am currently experiencing issues with my logo not aligning properly within the navigation bar

I am struggling with the whole concept of bootstraps. If there is anyone out there who can provide some guidance, I would greatly appreciate it.

Unfortunately, my style sheet is unable to connect to this website.

The appearance of my navigation bar currently resembles this, but it should actually look like this.

I sincerely hope someone can assist me in resolving this issue!

* {
  font-family: 'Oxygen', sans-serif;
  background-color: maroon;
}


/** Header **/

#header-nav {
  background-color: #f6b319;
  border-radius: 0;
  border: 0;
}

#logo-img {
  background: url('../images/flying-cat.png') no-repeat;
  width: 150px;
  height: 150px;
  left: 15px;
  background-size: contain;
  margin: 10px 10px 10px 10px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="navbar-brand">
            <div id="logo-img"></div>
          </a>
        </div>
      </div>
    </nav>
    </div>
    </div>
    </nav>
  </header>
</body>
</html>

htmlcssbootstrap-grid

Answer №1

The issue with the image not fitting properly is due to the absolute size set in your CSS class logo-img. The height of 150px is causing it to break out of the nav-bar. To resolve this, adjust the height property to a lower value so that it stays within the bounds of the nav-bar.

Additionally, having a div inside the navbar-brand div is unnecessary and can cause further complications. In bootstrap examples, the navbar-brand image should be an image element directly within the div. Ensure you use an image tag inside the navbar-brand div, specify a width, and set the height to auto for proper scaling.

Refer to the following Bootstrap example for guidance on structuring your navbar-header HTML: 

<div class="navbar-header">
      <a href="index.html" class="navbar-brand">
        <img src="https://placeholdit.co//i/555x150"></a>
</div>

Include the following CSS rule to address padding for the navbar-brand: 

.navbar-brand {
    padding: 10px;
}

Answer №2

The issue stemmed from the excessive styling imposed by bootstrap.

Therefore,

You should establish a fixed height for your Header, and then ensure that the background div is set to a height that fits within the header's dimensions to avoid potential issues down the line, especially with creating a responsive website.

I have created a demo that closely resembles what you are aiming for, so feel free to use it as a starting point for achieving your desired design.

* {
  font-family: 'Oxygen', sans-serif;
  margin:0;padding:0;
}

header{
  height: 100px;
}
#header-nav {
  background-color: #f6b319;
  border-radius: 0;
}
#header-nav,.container,.navbar-header,.navbar-brand{height: 100%;}

#logo-img {
  background: url('4.png') no-repeat;
  display:inline-block;
  width:80px;
  border:1px solid;
  height: 80px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="index.html" class="navbar-brand">
            <div id="logo-img"></div>
          </a>
        </div>
      </div>
    </nav>
    </div>
    </div>
    </nav>
  </header>
</body>
</html>

Answer №3

within the logo-image Include "display:inline-flex" Easy.

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

Is there a way to identify when a radio button's value has changed without having to submit the form again?

Within this form, I have 2 radio buttons: <form action='' method='post' onsubmit='return checkForm(this, event)'> <input type = 'radio' name='allow' value='allow' checked>Allow ...

javascripthtmlcssradio-buttonforms

Update the content within every <td> element using AJAX/JQUERY on a table created from JSP

I have a database filled with descriptions and corresponding ID numbers. The table displays them like this: index.jsp <table> <tr> <td>Name:</td> <td>Id:</td> </tr> <c:forEach items ...

javascriptjavajqueryhtmlajax

Is it possible to programmatically hide the Textarea and submit button for each row in a PHP-generated database table?

After spending a considerable amount of time on this project, I'm looking to incorporate a JavaScript effect (hide/unhide) into a basic submit form. Although the functionality is successful, it seems to be limited to only one row in the database tabl ...

javascriptphphtmlmysql

Step-by-step guide on preventing an item from collapsing in a Bootstrap navbar

Is there a way to exclude a specific item from the navbar collapse box when the screen size becomes small? Here is the current HTML code: <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> ...

jqueryhtmlcsstwitter-bootstrapnavbar

Folded Corner Div using only CSS

I've been tirelessly experimenting with countless online methods, but I can't seem to make anything work. There's a div that needs to be flexible in width and height, positioned on a tile-able background image with a 1px border. The challe ...

css

:first-child that does not have the class .disabled

Does anyone have a solution for selecting the initial item in a list that does not possess the "disabled" class? ...

css

How can I easily add both horizontal and vertical arrows to components in React?

Creating a horizontal line is as simple as using the following code: <hr style={{ width: "80%", border: "1px solid black" }} /> You can customize the width, length, and other properties as needed. If you want to display an arrow ...

javascriptcssreactjssvg

Modification of encapsulated class in Angular is not permitted

Within Angular, a div element with the class "container" is automatically created and inserted into my component's HTML. Is there a way to modify this class to "container-fluid"? I understand that Angular utilizes encapsulation, but I am unsure of how ...

cssangular

Sort PHP results by the initial letter of the name in a stylish manner

Hello, I am attempting to organize categories by the first letter and format them using ul and li elements. Here is my code: $Sql = "SELECT *, COUNT(Cup_Id) AS num FROM tabcup INNER JOIN tabcats ON tabcupom.Cat_Id = tabcats.Cat_Id ...

phphtmlmysqlloops

My HTML Won't Recognize the CSS File

Despite trying various paths and browsers, I am unable to link my CSS file to my HTML file. When inspecting the page elements and checking under resources, the CSS file does not appear. Here is a snippet of my HTML: <html> <head> <meta ...

htmlcss

Ways to format the direct descendant of a multi-level list?

Check out my nested ul list: <ul> <li> <a href="/"></a> </li> <li> <a href="/"> </a> &l ...

htmlcsssassscss-mixins

What is the most efficient method for updating URLs in CSS files before the website goes live?

The project I am currently working on has been worked on by various coders with different backgrounds. One of my recent achievements was writing a clean Capistrano recipe to minimize CSS and JS files. Now, the challenge ahead is figuring out how to identif ...

cssregexbashcapistranoweb-deployment

The battle of line-height versus padding for achieving vertical centering with one-lined text

One-lined text can be vertically centered using either the line-height property or by adding padding-top and padding-bottom. What are the advantages and disadvantages of each method? body { font-size: 12px; font-family: ...

htmlcsscentering

What could be causing the issue of not being able to load CSS files or images?

I'm currently in the process of learning how to develop websites, but I've encountered a stumbling block that I can't seem to overcome. I'm hoping someone here can help me out. I'm facing an issue where I am unable to link either a ...

htmlcssnode.jsexpressejs

Aligning three hyperlinks evenly to spread across the webpage

My professor provided the class with an image that may resemble something he could ask us to recreate on an upcoming exam. He suggested we try replicating it at home to study. I have most of it figured out, but there are three links positioned perfectly ac ...

htmlcss

Creating a CSS grid layout with dual columns to dynamically adjust and accommodate two items in each row

I am attempting to create this layout using CSS grid: The goal is to have an input and a textarea. The textarea should be of the size of 2 inputs. If there is already a textarea in the previous column, the next column should accommodate 2 inputs. The numb ...

csscss-grid

The alignment of the submit button is consistently off when placed alongside two input boxes within a table

Completing this task is usually straightforward. I have a sign-in form with an email input, password input, and submit button aligned horizontally. However, after trying various styles and structures for hours, the button appears slightly lower than the in ...

htmlcssinputcss-positionsubmit-button

Outer div encapsulating inner div within its boundaries

I am looking for a solution where the inner div stays fully contained within the outer div, without overflowing and overlapping with the padding of the outer div. Here is a code sample that demonstrates the issue .inner { /* Overflow */ overflow-wra ...

javascripthtmlcss

Extracting Data from HTML Using VBA

I'm attempting to extract the value from the following HTML source code: K<sub>C</sub> [ksi&#8730in]:<br> <input class="test1" type="text" name="fKC" value=""> <br> However, the code I tried using does not seem to ...

htmlvba

What is the best way to implement a sidebar closing animation?

Utilizing both react and tailwindcss, I successfully crafted a sidebar menu that elegantly appears from left to right when the user clicks on the hamburger icon. However, my attempts to create a reverse animation as the sidebar disappears from right to lef ...

javascriptcssreactjsnext.jstailwind-css