How to fix my CSS Code To Align My Links? - Html

justarwa
April 20, 2023
158 views
0 votes
2 Answers

I want my css code to do this:

But it ended up like this:

How do I make the word "NEXT" go on top of the black background? And I am not sure where did my other links go, how do I align it and make my other links a white color? The #fff in my CSS code doesn’t seem to be working.

Could someone review my code?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Kumbh Sans', sans-serif;
}

.navbar {
  background: #131313;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar__container {
  display: flex;
  justify-content: space-between;
  height: 80px;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 50px;
}

#navbar__logo {
  background-color: #ff8177;
  background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 2rem;
}

.fa-gem {
  margin-right: 0.5rem;
}

.navbar__menu {
  display: flex;
  align-items: center;
  list-style: none;
  text-align: center;
}

.navbar__item {
  height: 80px;
}

.navbar__links {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 1 rem;
  height: 100%;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--idk what this is at the top ^ but vscode automatically writes it for me.-->
<title>NEXT Website</title>
<link rel="stylesheet" href="style.css">
<!--this is linking to style.css ^-->

<nav class="navbar"></nav>
<!--I need to review what "nav" does-->
<div class="navbar__container">
  <a href="/" id="navbar__logo">NEXT</a>
  <div class="navbar__toggle" id="mobile-menu">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
  <!-- ^ this looks like some sort of list idk what it means-->
  <ul class="navbar__menu">
    <li class="navbar__item">
      <a href="/" class="navbar__links">Home</a>
    </li>
    <li class="navbar__item">
      <a href="/tech.html" class="navbar__links">Tech</a>
    </li>
    <li class="navbar__item">
      <a href="/" class="navbar__links">Products</a>
    </li>
    <li class="navbar__btn">
      <a href="/" class="button">Sign Up</a>
    </li>

  </ul>
</div>

Tags: css html

Answers

You close your <nav> element straight away, so none of the things you want to be inside it actually are. Close it after the rest.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Kumbh Sans', sans-serif;
}

.navbar {
  background: #131313;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar__container {
  display: flex;
  justify-content: space-between;
  height: 80px;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 50px;
}

#navbar__logo {
  background-color: #ff8177;
  background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 2rem;
}

.fa-gem {
  margin-right: 0.5rem;
}

.navbar__menu {
  display: flex;
  align-items: center;
  list-style: none;
  text-align: center;
}

.navbar__item {
  height: 80px;
}

.navbar__links {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 1 rem;
  height: 100%;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--idk what this is at the top ^ but vscode automatically writes it for me.-->
<title>NEXT Website</title>
<link rel="stylesheet" href="style.css">
<!--this is linking to style.css ^-->

<nav class="navbar">
  <!--I need to review what "nav" does-->
  <div class="navbar__container">
    <a href="/" id="navbar__logo">NEXT</a>
    <div class="navbar__toggle" id="mobile-menu">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
    <!-- ^ this looks like some sort of list idk what it means-->
    <ul class="navbar__menu">
      <li class="navbar__item">
        <a href="/" class="navbar__links">Home</a>
      </li>
      <li class="navbar__item">
        <a href="/tech.html" class="navbar__links">Tech</a>
      </li>
      <li class="navbar__item">
        <a href="/" class="navbar__links">Products</a>
      </li>
      <li class="navbar__btn">
        <a href="/" class="button">Sign Up</a>
      </li>

    </ul>
  </div>

</nav>

UPDATE:

I tried to prepare your code in a similar way from the beginning. You can check it from below code snippet. I hope it works for you.

* {
  margin: 0;
  padding: 0;
  box-sizing: 0;
  text-decoration: none;
  list-style-type: none;
}

.container {
  width: 100%;
  height: 66px;
  background: #000;
  display:flex;
  justify-content:center;
  align-items:center;
}

.logo{
  width:25%;
  height:100%;
  float:left;
  background-color: #ff8177;
  background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  cursor: pointer;
  text-decoration: none;
  font-size: 3rem;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  position:relative;
  left:20px;

}

.list {
  width:75%;
  height:100%;
  float: left;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  position:relative;
  right:20px;
}

.navbar {
  width: 100%;
  height: 100%;
}

.signup {
  background:teal;
  padding:10px;
  border-radius:10px;
  color:#fff;
}

.signup:hover {
  background:teal;
  padding:10px;
  border-radius:10px;
  color:gold;
  cursor:pointer;
}


ul li {
   display:inline-flex;
   padding:15px;
}



ul li a {
  color: #fff;
  transition: all .3s ease-in;
  font-size:20px;
}

ul li a:hover {
  color: Gold;
}

.active{
  color: gold;
}

<nav class="navbar">
   <div class="container">
      <div class="logo">NEXT</div>
         <div class="list">
          <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">Tech</a></li>
            <li><a href="#">Products</a></li>
          </ul>
        <span class="signup">Sign Up</span>
         </div>
   </div>
</nav>

Please signup or login to give your own answer.

Click here to cancel reply.

How to fix my CSS Code To Align My Links? – Html

Answers