How to adjust the logo in the nav bar without croping the actual logo , where i am creating a wed D project using react js

Antesh Tiwari 0
Viewed 12

enter image description hereenter image description here[

import consultin2 from '../../assets/logo/consultin2.png';

inside function
{
<nav>
        <div className="navbar-logo">
        <img src={consultin2} alt="ConsultIn"></img>
        
        </div>
        
        .......</nav>

}
 .navbar-logo{
    position: absolute;
    display: block;
    left: 0%;
    margin: auto;
    width: fit-content;
    height: fit-content;
    /* max-width: 250px; */
    
}

][1][enter image description here][2]I am totally stuck and frustrated in the logo part of my Web Development project. I am unable to adjust the logo in the navbar , if I am trying to do so then I am getting these types problems:

  1. If logo , fit the navbar then width of the nav bar increases , but I don't want to increase the width of the navbar.

2.If however I am able to adjust the logo in the nav bar then my logo gets cropped , which I don't want to do .

I only want to adjust my logo in the left side in my navigation bar width top = 0%, bottom=0% and left=0% without cropping my logo and without increasing the width of my navigation bar.

I have used .png format image.

[enter image description here][3]

css html
1 Answers

This might help

Solution 1 -> Using Calc():

  1. Set either the width or the height of the logo. [Because if you set both then the logo's ratio will change]

  2. Use the calc() function of css to subtract the extra width or height.

Solution 2 -> Using Position:

  1. If you want to use positioning, then first use position:relative to navbar.

  2. Then set position: absolute; left: 0; top: 0; to logo;

Solution 3 -> Flexbox:

  1. Set display: flex; justify-content: space-between; align-items: center; to navbar. **In this case, you might have to wrap other elements than logo in a <div>

  2. Make sure to control margin and padding of navbar and logo to get the desired design.

Hind Sagar Biswas0
Related