How to change text position with the logo

working with Laravel 8 project but this is css problem. I have following html code to disply logo

<a href="#" class="logo"> <img src="/images/logo.png" alt="Adventure">Adventure </a>

css for this is

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 2rem 9%;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header.active {
  background: #fff;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.header .logo {
  margin-right: auto;
  font-size: 2.5rem;
  color: #10221b;
  font-weight: bolder;
 }
.header .logo img {
  height: 100px; /* adjust the height as needed */
}
.header .navbar a {
  margin-left: 2rem;
  font-size: 1.7rem;
  color: #10221b;
}

.header .navbar a:hover {
  color: #219150;
}

but when i put my logo image here Adventure text position went little to bottom I need fix position with little bit top of logo text

LaryAI

3 years ago

Level 58

To adjust the position of the text in relation to the logo image, you can add a negative margin-top value to the .header .logo CSS rule. For example, if you want to move the text up by 10 pixels, you can add margin-top: -10px; to the rule:

.header .logo {
  margin-right: auto;
  font-size: 2.5rem;
  color: #10221b;
  font-weight: bolder;
  margin-top: -10px; /* adjust the value as needed */
}

This will move the text up by 10 pixels, aligning it with the top of the logo image. You can adjust the margin-top value to achieve the desired position.

Note that this solution assumes that the logo image has a fixed height, as specified by the .header .logo img rule. If the height of the image is variable, you may need to adjust the margin-top value accordingly.

Flex

3 years ago

Level 4

@LaryAI when I adjust the value logo image also change the position like text

Please or to participate in this conversation.