Question 185514 in Html Question posted in
Some basic documentation can be found here.

Html – Can't figure out how to make the logo and text be near each other

Cant figure out how to make the text (mount apo) be near/stuck to the logo without messing everything up, I’m new to coding and still trying to learn.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #24252A;
}

li,
a,
button {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
}

.logo {
  cursor: pointer;
  width: 100px;
  margin: 0;
  overflow: visible;
}

.mtap a {
  float: left;
}

.nav_links {
  list-style: none;
}

.nav_links li {
  display: inline-block;
  padding: 0px 20px;
}

.nav_links li a {
  transition: all 0.5s ease 0s;
}

.nav_links li a:hover {
  color: #0088a9;
}

button {
  padding: 9px 25px;
  background-color: rgba(0, 136, 169, 1);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.5s ease 0s;
}

button:hover {
  background-color: rgba(0, 136, 169.0.8);
}

li {
  list-style: none;
}

ul {
  display: flex;
}

ul li a {
  color: #fff;
  text-decoration: none;
  padding: 0.4rem 1rem;
  margin: 0 10px;
  position: relative;
  transition: all 0.5s;
  text-transform: uppercase;
}

.nav_links li a:before {
  content: "";
  position: relative;
  bottom: 12px;
  left: 12px;
  width: 12px;
  height: 12px;
  border: 3px solid white;
  border-width: 0 0 3px 3px;
  opacity: 0;
  transition: all 0.6s;
}

.nav_links li a:hover:before {
  opacity: 1;
  bottom: -8px;
  left: -8px;
}

.nav_links li a:after {
  content: "";
  position: relative;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border: 3px solid white;
  border-width: 3px 3px 0 0;
  opacity: 0;
  transition: all 0.6s;
}

.nav_links li a:hover:after {
  opacity: 1;
  top: -8px;
  right: -8px;
}
<!-- make a bar on the top and make a background image with fade in border, 
    main color theme is green reference:https://mobirise.com/extensions/charitym5/non-governmental-organization/-->
<header>
  <img class="logo" src="Images/Untitled.png" alt="logo">
  <a class="mtap">
  Mount 
  <br>
  Apo
</a>
  <nav>
    <ul class="nav_links">
      <li><a href="#">Services</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>
  <a class="cta" href="#"><button>Contact</button></a>
</header>

tried messing with padding in the header but it just messed everything up, also tried doing float and overflow on the logo and text but it doesn’t work.

Tags:

3

Answers


  1. 0

    Kindly check below point :

    • Adds a .logo-container div that positions the logo and text together using display: flex

    • Adds a .text div to contain the "Mount Apo" text

    • Gives the .text a margin-left to provide some spacing from the logo

    • Decreases the font size of the .mtap class to fit nicely next to the logo

    Good luck to you

    Login or Signup to reply.
  2. 0

    Use display: flex to align the logo and the text.

    Sample Code:

    @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: #24252a;
}

li,
a,
button {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #edf0f1;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 10%;
}

.logo-wrapper {
  display: flex;
  align-items: center;
}

.logo {
  width: 100px;
  margin: 0;
  overflow: visible;
}

.logo-wrapper span {
  margin-left: 1rem;
}

.nav_links {
  list-style: none;
}

.nav_links li {
  display: inline-block;
  padding: 0px 20px;
}

.nav_links li a {
  transition: all 0.5s ease 0s;
}

.nav_links li a:hover {
  color: #0088a9;
}

button {
  padding: 9px 25px;
  background-color: rgba(0, 136, 169, 1);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.5s ease 0s;
}

button:hover {
  background-color: rgba(0, 136, 169.8);
}

li {
  list-style: none;
}

ul {
  display: flex;
}

ul li a {
  color: #fff;
  text-decoration: none;
  padding: 0.4rem 1rem;
  margin: 0 10px;
  position: relative;
  transition: all 0.5s;
  text-transform: uppercase;
}

.nav_links li a:before {
  content: "";
  position: relative;
  bottom: 12px;
  left: 12px;
  width: 12px;
  height: 12px;
  border: 3px solid white;
  border-width: 0 0 3px 3px;
  opacity: 0;
  transition: all 0.6s;
}

.nav_links li a:hover:before {
  opacity: 1;
  bottom: -8px;
  left: -8px;
}

.nav_links li a:after {
  content: "";
  position: relative;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border: 3px solid white;
  border-width: 3px 3px 0 0;
  opacity: 0;
  transition: all 0.6s;
}

.nav_links li a:hover:after {
  opacity: 1;
  top: -8px;
  right: -8px;
}
    <html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Creative Menu Effect</title>
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <!-- make a bar on the top and make a background image with fade in border, 
    main color theme is green reference:https://mobirise.com/extensions/charitym5/non-governmental-organization/-->
  <header>
    <a href="#" class="logo-wrapper">
      <img class="logo" src="https://fakeimg.pl/100x60/000000/12e6c6?text=Mount+Apo" alt="logo">
      <span>
                Mount
                <br>
                Apo
            </span>
    </a>
    <nav>

      <ul class="nav_links">
        <li><a href="#">Services</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">About</a></li>
      </ul>

    </nav>
    <a class="cta" href="#"><button>Contact</button></a>
  </header>

</body>

</html>
    Login or Signup to reply.
  3. 0

    Wrap the logo and the text under a div and give it a flex Css:

    <div class="logoWrapper">
  <img class="logo" src="Images/Untitled.png" alt="logo">
  <a class="mtap">
  Mount 
  <br>
  Apo
</a>
</div>

    Style it as follows:

    .logoWrapper {
display:flex;
gap:10px;
align-items:center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search