Center the image within the navbar container

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse.collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div class="navbar-brand">
          <div> <img src="images/logo.png" /></div>
          <h1><span>SUJALA WELLNESS</span> </h1>
        </div>
      </div>

      <div class="navbar-collapse collapse">
        <div class="menu">
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation"><a href="index.html" class="active">Home</a></li>
            <li role="presentation"><a href="https://www.kykindia.com" target="_blank">KYK India</a></li>
            <li role="presentation"><a href="https://www.kykindia.com/health-benefits/" target="_blank">Health Benefits</a></li>
            <li role="presentation"><a href="https://www.kykindia.com/certifications/ " target="_blank">Certifications</a></li>
            <li role="presentation"><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

Click here to view the image and find out how to resize the logo to fit the navbar dimensions.

I need help aligning the logo inside the navbar along with the company name. It's fine if the content overlaps the div tag. How can I achieve this alignment?

htmlcss

Answer №1

After making some adjustments to your code, I utilized flexbox for a cleaner layout: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid gray;
  padding: 10px;
}

.navbar__left,
.navbar__right,
.navbar__list {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.navbar__logo {
  width: 150px;
  height: 100px;
}

.navbar__title {
  margin-left: 10px;
}

.navbar__list-item {
  list-style: none;
  margin-right: 20px;
}
<nav class="navbar">
  <div class="navbar__left">
    <img class="navbar__logo" src="https://www.telegraph.co.uk/content/dam/news/2016/08/23/106598324PandawaveNEWS_trans_NvBQzQNjv4Bqeo_i_u9APj8RuoebjoAHt0k9u7HhRJvuo-ZLenGRumA.jpg?imwidth=450" alt="logo">
    <span class="navbar__title">My Company</span>
  </div>
  <div class="navbar__right">
    <ul class="navbar__list" role="tablist">
      <li class="navbar__list-item" role="presentation"><a href="index.html" class="active">Home</a></li>
      <li class="navbar__list-item" role="presentation"><a href="https://www.kykindia.com" target="_blank">KYK India</a></li>
      <li class="navbar__list-item" role="presentation"><a href="https://www.kykindia.com/health-benefits/" target="_blank">Health Benefits</a></li>
      <li class="navbar__list-item" role="presentation"><a href="https://www.kykindia.com/certifications/ " target="_blank">Certifications</a></li>
      <li class="navbar__list-item" role="presentation"><a href="contact.html">Contact</a></li>
    </ul>
  </div>
</nav>

Answer №2

<div class="navbar-brand">
    <span><img src="images/logo.png"/></span>
    SUJALA WELLNES
</div>

In order to ensure proper styling, you may need to specify a height: ...px; for the .navbar-brand img in your CSS. Avoid using <h1> as heading tags default to displaying as inline-block and could initiate a new line unnecessarily.

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

Transitioning from one CSS id to another during page loading

Wondering how to fade in one CSS id on page load and then smoothly transition to another after a few seconds? Here are the ids: #background { background: url("images/am_photography_bg.jpg") no-repeat center -25px fixed; background-size: 100%; ...

javascriptjqueryhtmlcss

There seems to be an issue with the integration of Bootstrap in my JavaScript file

Is there a way to ensure that each new data entry in the array appears next to each other rather than stacking beneath one another? This is a JavaScript file with HTML written in Bootstrap format. const collegeData = [{ name: "University of Penn ...

javascripthtmljsonbootstrap-4

Using Jquery: Removing the strikethrough effect upon the second click!

Currently in the process of learning Jquery and experimenting with using a button to apply a "text-decoration" to a list item upon clicking. However, I encountered an issue where I couldn't figure out how to use the same button to remove the "text-dec ...

jquerycss

Create a layered panel underneath a button that covers a separate element

I am working on a layout that consists of an editor and multiple buttons positioned above it on the right side. My goal is to add a panel just below "Button2" that will overlay the editor. This panel should expand and collapse when "Button2" is clicked, wh ...

cssreactjscss-positionfluent-uifluentui-react

Error message: IndexError: list index out of range while attempting to trigger a click event using selenium

There are a total of 41 category checkboxes on the page, with only 12 initially visible while the rest are hidden. To reveal the hidden checkboxes, one must click on "show more." This simple code accomplishes that: [step 1] Loop through all checkboxes > ...

pythoncssseleniumweb-scrapingscrapy

Get ready for some Angular validation appearing on the screen

Using AngularJS, I have set up routes and validations on the HTML page. Here is a snippet of my HTML code: <form ng-controller="validateCtrl" name="loginForm" novalidate> <p>UserName:<br> <input type="text" name=" ...

htmlangularjsvalidation

The z-index property fails to function properly when used with a relative parent and after/before pseudo-elements

Here is the code snippet (prototype) that I am working with: .headerz { position: relative; padding: 5rem 0 0 5rem; margin: 3rem 0 0 0; color: #000; font-size: 3.8rem; text-transform: uppercase; z-index: 24; } .headerz::before { content ...

htmlcssz-indexpseudo-element

"Delve into the art of utilizing negative space between elements with

Looking to implement hover detection between rows in a grid container, rather than on individual items. The number of items in the container and per row may vary. https://i.sstatic.net/yBgKI.png It's important to note that the item count in the cont ...

javascriptjqueryhtmlcsshover

Utilizing Bootstrap divs for multiline display in Yii2 platform

Currently, I am utilizing a list in Bootstrap CSS which is responsive and beneficial. However, I am faced with the challenge of creating a notification list with lengthy text akin to that on Facebook. My query pertains to the technique required to make th ...

jqueryhtmlcsstwitter-bootstrap

Animation of two divs stacked on top of each other

I am trying to replicate the animation seen on this website . I have two divs stacked on top of each other and I've written the following jQuery code: $('div.unternehmen-ahover').hover( function () { $('div.unternehmen-ahover' ...

javascriptjquerycsshtmlslider

What's the best way to navigate across by simply pressing a button located nearby?

Hey there! I'm new to JavaScript and I'm working on a shopping list page for practice. In my code, I can add new items to the list, but what I really want is to be able to cross out an item when I click the "Done" button next to it, and then uncr ...

javascripthtmlcssdom

How can I modify the background color of a dimmer in Semantic-UI framework?

How can I change the color of the dimmer in my modal when I am unable to do so currently? <div class="ui modal"> <i class="close icon"></i> <div class="header"> Profile Picture </div> <div class="content"> ...

javascriptjqueryhtmlcsssemantic-ui

I am looking to implement user authentication using firebase, however, the sign-in page is currently allowing invalid inputs

<script> function save_user() { const uid = document.getElementById('user_id'); const userpwd = document.getElementById('user_pwd'); const btnregister=document.getElementById('btn-acti ...

htmlcssfirebase

Subheaders that stay in place while scrolling through a table with a stationary header

My goal is to design a table with a fixed header that allows the body to scroll under the header. While this is a common design, I am facing the challenge of implementing sticky subheaders. These subheaders should scroll along with the table until they rea ...

javascripthtmlcsshtml-tablefixed-header-tables

Ways to stop a JS plugin affecting HTML anchors and preventing them from automatically scrolling to the top

My friend is working on a website and he's using a plugin called Flip Lightbox. The basic functionality of the plugin is that when you click on an image, it flips over and pops out as a lightbox. Everything works fine, however, if you scroll down the ...

javascriptjqueryhtmlcss

javascript cannot utilize html reset functionality

My drop down menu includes an onChange event that triggers a JavaScript method. However, when I select a new value and then click the reset button, the dropdown reverts back to its original value but the onChange event does not fire. <select onChange= ...

javascripthtml

Tips for adjusting the hover size in a navigation bar

I'm currently learning how to use bootstrap and I'm attempting to create a navbar that shrinks when scrolled down, and I also want the hover effect on the links to be full-height. I've tried multiple approaches but haven't been successf ...

jqueryhtmlcssbootstrap-4

Adjust the HTML Canvas to cover the entire screen

I am trying to adjust the HTML Canvas element so that its width matches the width of the browser window and its height matches the height of the browser window. Below is the code snippet I am using: HTML: <body> <canvas id="gameCanvas" ...

javascriptjqueryhtmlcanvas

Trouble with recognizing nested functions when calling them in an onClick event

Encountering a `not defined` error on the console when attempting to call nested functions with an `onClick` event in an HTML page. After searching for solutions without success, I suspect it may be a scope or closure issue, but I am unsure of how to addre ...

javascripthtml

The video player in HTML may not be compatible with all MP4 files, as some may work while

I have included the following code for embedding mp4 videos on my website: <video class="video" controls="" width="100%" src="videopath/videoname.mp4"></video> Despite using this code for 3 videos, all in mp4 format, only one of them is funct ...

htmlspring-mvchtml5-videovideo-embedding