How can I change the font-size of a nav- menu. Portfolio project

HTML-CSS
1

How can I change the font-size of a nav menu. I set the font-size of the body to different font-size and I cant’s see any chage over the nav. I don’t understand why! the font-size remains on nav despite I change the font-size on the body.

2

Please post your code.

Use the “preformatted text” tool in the editor (</>) to add backticks around the code.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

3

This is my html code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
    <link
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
    crossorigin="anonymous"
  />
  <link
    href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap"
    rel="stylesheet"
  />
  <link
    href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap"
    rel="stylesheet"
  />
  </head>
  <body>
<!--START NAV-->
<nav id="navbar" class="nav">
  <ul class="nav-list">
    <li>
      <a href="#welcome-section">Sobre mi</a>
      </li>
      <li>
        <a href="#projects">Trabajo</a>
        </li>
        <li>
          <a href="#contacts">Contacto</a>
          </li>
    </ul>
</nav>
<!--END NAV-->

  </body>
</html>

and this is my css code:

/*custom properties variables*/

:root {
    --main-blue: #114c61;
    --main-white: #f0f0f0;
  }
  

  
/*base styles*/
body {
  font-family: 'Poppins',sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4; 
  color: var(--main-white);
}

h1, h2{
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  text-align: center; 
}

ul {
  list-style: none;
}

a{
text-decoration: none; 
color: var(--main-white);
}

/* nav */
.nav{
  display: flex;
  justify-content: flex-end;
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  background: var(--main-blue);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.nav-list {
  display: flex; 
  margin-right: 2rem; 
}

@media (max-width: 31.25rem) {
  .nav {
    justify-content: center;
  }

  .nav-list {
    margin: 0 1rem;
  }
}

.nav-list a{
  display: block; 
  font-size: 1rem;
  padding: 1rem;
}

That is my progress at this moment. I’m creating a portfolio. I don’t how to change the font-size of the nav

4

I don’t know if you get what I’m saying! It’s about the nav font-size. I don’t know how to change it! any changes are applied in my end!

5

have you tried using pixles on your body font-size?

I like to specify my body font-size in pixles and use em for other elements such as padding.

6

The styles are working. You set one font size on the body and another one on the nav links.

The nav links are 1rem and the body is 1.8rem.

1rem is 16px and 1.8rem is 28.8px

body {
  font-size: 1.8rem;
}

.nav-list a {
  font-size: 1rem;
}
7

Thank you very much for your answer. I can see it right now. Sorry for the confusion!

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.