What is the code to position the brand name to the right of a logo in HTML?

As I work on building my webpage, I am facing an issue where I want the brand name to appear directly next to the logo, on the right side. I have attempted to use the float-left property without success.

I've included both the HTML and CSS code here. Can someone please assist me with this? If possible, kindly find a solution that does not involve using flex-box.

Here is the snippet of my code:


<!doctype html>
<html lang="en">

<head>
  <title>DEV RESTAURANT TESTING</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <link rel="stylesheet" href="testing.css">
  <link href="https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,900;1,900&display=swap" rel="stylesheet">
</head>

<body>


  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="testing.html" class="float-left">
            <div id="logo-img" alt="logo image"></div>
          </a>
          <div class="navbar-brand ">
            <a href="testing.html">
              <h1>Burger King</h1>
            </a>
          </div>

        </div>
      </div>
    </nav>
  </header>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>
htmlcssbootstrap-5

Answer №1

Modify the CSS to make both .navbar-image and .navbar-brand float left, then add a margin-top to .navbar-brand for vertical centering:

body {
  font-size: 16px;
  background-color: #61122f;
  font-family: 'Oxygen', sans-serif;
}

#header-nav {
  background-color: gold;
}

#logo-img {
  background: url("https://placekitten.com/200/200") no-repeat;
  width: 152px;
  height: 152px;
  margin: 10px 15px 10px 0;
}

.navbar-image, .navbar-brand{
  float: left;
}

.navbar-brand{
  margin-top: 50px;
}
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debcb1b1aaadaaacbfae9eebf0eff0ee">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<header>
  <nav id="header-nav" class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a href="testing.html" class="navbar-image float-left">
          <div id="logo-img" alt="logo image"></div>
        </a>
        <div class="navbar-brand ">
          <a href="testing.html">
            <h1>Burger King</h1>
          </a>
        </div>
      </div>
    </div>
  </nav>
</header>

Answer №2

CSS Styling:

.align-left{
    float: left
}
.nav-brand {
    float: left 
}

Answer №3

After reviewing your code, I noticed that you can easily accomplish this task by leveraging the power of flexbox and specifically the property justify-content: flex-start. Simply include the following properties in your style sheet -

.navbar-header{
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
}

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

Selecting the parent span element using jQuery

Is there a better way to display text in the parent <div>'s <span>? I'm having trouble with using spans and .parent(), any advice would be appreciated. HTML: <div> <span></span> <!--the span where I need to show ...

javascriptjqueryhtml

Pointer-events property in pseudo elements not functioning as expected in Firefox browser

I have a horizontal menu that includes mid-dots (inserted using the ::after pseudo element) to separate the menu items. I want to prevent these mid-dots from being clickable. This works fine in Safari, but in Firefox (v.47), the pointer-events: none prope ...

htmlcsscss-selectorscross-browserpseudo-element

When setting the form action attribute in jQuery, the parameter being passed may be null

My goal is to redirect my form action to another page with a URL parameter. Here's the code I'm using: ui.setFormActionToTargetPage = function () { $('form').get(0).setAttribute('action', 'myTargetPage.html?id=' ...

javascriptjqueryhtml

I'm curious if there is a specific jQuery event that triggers right before an element loses focus or right before the next element gains focus

I am facing a situation where I have two input elements in a form that are closely connected. The first element triggers an ajax call to check for existing data in the database when the user tries to move away from it, while the second element opens a moda ...

javascripthtmljqueryfocusblur

How to find and pair up custom data attributes that are unfamiliar?

Is there a method to select elements with unspecified custom data attributes? When I say unspecified, I am referring to an element that could appear like this: <div data-unknown="foo"></div> or <td data-someOtherCustomDataAttribute="bar"& ...

htmlcsscss-selectors

With Firefox, when submitting a form only the final repeated region value is $_POSTed and not all of them

There seems to be an issue with the code below when running it in Firefox. The problem occurs when passing the URL variable UserName. In Firefox, only the last record is being used from the record-set, regardless of which button is clicked. This page utili ...

phphtmlfirefox

To implement a class based on a media query, only pure CSS or HTML is required

Is there a way to apply a specific class to an ID based on screen height using only CSS, HTML, or LESS without pre-compilation? The goal is to set classes from Add2Any, not CSS properties. Here is a link to the jsfiddle. The desired outcome is to have th ...

htmlcssresponsive-designlesssocialshare

Using Python to display MySql information in HTML documents

I am currently working on a project that involves displaying a dynamic list of items from a MySQL database on an HTML page. The challenge here is that the list needs to update automatically as the database is modified. Each item on the list should also lin ...

pythonmysqlhtml

Using JavaScript to create a search bar: Can "no results found" only show after the user has completed typing their search query?

How can I ensure that the "no match" message only appears after the user has finished typing in their search query, rather than seeing it while they are still typing "De" and the list displays "Demi"? usernameInput.addEventListener("keyup",function(){ ...

javascripthtmlcssdom-eventsdisplay

An HTML button generated by a .js file is able to execute a .js function without any issues, but it inadvertently removes all .css styling

Currently grappling with an issue in my JavaScript self-teaching journey that I can't seem to resolve or find examples for. The problem at hand: When the HTML button calls a .js function, it successfully executes the function but also wipes out all C ...

javascripthtmlcss

I'm puzzled, can anyone provide clarification on the concept of xml?

Recently, Sheshank S. provided me with a solution to my question, but I failed to grasp its meaning. Can someone please explain it to me? Despite looking through various tutorials on websites and videos, none of them have been able to clarify what this cod ...

javascripthtmlxhtml

I'm encountering difficulties utilizing ternary operators in TypeScript

I am struggling with ternary operators in TypeScript and need help understanding the issue. Please review the code below: const QuizQuestionContainer = ({ qa }: QuizQuestionContainerPropsType) => { const { question, option1, option2, option ...

htmlreactjstypescriptforms

The HTML element update event was not triggered due to the excessive load of a JavaScript function

I am currently running a JavaScript function that is quite CPU intensive. To provide visual feedback to users when it starts and stops, I am attempting to display a badge on the webpage. Below is the code snippet: function updateView() { console.log(1 ...

javascripthtmlcssbootstrap-4

Providing input through the URL bar in PHP and HTML

I have a simple form on my website's HTML page. <form action="post.php" method="post"> Message: <input type="text" name="message" /> &nbsp; <input type="submit" name="submit" value="send"> </form> After submitti ...

phphtml

"What is the best way to transform tab navigation into a dropdown menu with the help

I have a collection of tabs currently on display. I am looking to transform them into a dropdown menu when the screen size changes, making them more responsive. Each set of tabs corresponds to different content. Despite trying various solutions found on s ...

javascriptjqueryhtml

Tips for utilizing Material Design Lite for an input button

I have a HTML document that incorporates Material Design Lite 1.3 elements: <div id="submit-gs-req-form"> <div class="demo-card-wide mdl-card mdl-shadow--2dp"> <div class="mdl-card__title"> <h2 class="mdl-car ...

htmlmaterial-design-lite

How can I show tab objects in a Chrome extension?

I'm currently working on developing a new Google Chrome extension that focuses on tab organization. Despite the abundance of similar extensions already available, I am determined to create my own unique solution. One idea I have is to create a popup w ...

javascripthtmlgoogle-chromegoogle-chrome-extension

The Issue with Non-Functional Links in Nivo Slider

Currently facing an issue with the Nivo Slider as it no longer links to any of the photos in the slider. Initially, I had 14 pictures linked to a post with a full embedded gallery inside. The problem arose when using a "fixed" size for the gallery, which d ...

cssnivo-slider

Using Column CSS Property with Google Maps in Chrome: A Potential Bug?

I'm facing an interesting issue and I could use some help understanding or fixing it. It seems like there might be a bug or a solution to this problem. I am currently working on a layout using the CSS3 property columns. Everything looks fine in Firefo ...

htmlcssgoogle-mapsgoogle-chrome

in comparison to the base directory in ASP.NET

When using "/", it refers to the root directory. This can be seen in code like: <link href="/Styles/Order.css" rel="stylesheet" /> This specifies a file path that is relative to the root directory. However, when dealing with server controls, you m ...

htmlasp.net