Css text align overwriten by something

Question

Im writing css for navbar and li is suddenly being overwriten by something and I dont know what. I want routes (home about faq) to be centered in middle like logo.

I tried with !important but it is still crosses, I am not sure what is he inheriting

const Navbar = () => {
  return (
    <nav className='nav-container'>
      <div className='nav__logo'>Logo</div>

      <ul className='nav__routes'>
        <li className='nav__item'>Home</li>
        <li className='nav__item'>About</li>
        <li className='nav__item'>FAQ</li>
      </ul>

      <div className='nav__containerRight'>
        <p>IKONA SHOP</p>
        <button>Sign In</button>
      </div>
    </nav>
  );
};

@import '../../theme.css';

.nav-container {
  display: flex;
  width: 100%;
  height: 70px;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font-size: 1.2rem;
  top: 0;
}

.nav__routes {
  display: flex;
  align-items: center;
  list-style: none;
  text-align: center;
  justify-content: center;
}

.nav__item {
  height: 70px;
  border-bottom: 2px solid transparent;
  padding: 0 30px;
}

.nav__item:hover {
  border-bottom: 4px solid var(--secondary-color);
}

I think you might be solving the wrong problem, it sounds like you are trying to centre vertically, which `text-align` doesn't do. You might want to look at `vertical-align` ([documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)) — DBS, Sep 29 '20 at 08:43

score 0 · Accepted Answer · answered Sep 29 '20 at 08:53

0

Please remove height from .nav__item or use line-height: 70px in .nav__item

Hope it works for you

See Example below https://codepen.io/rvtech/pen/JjXVgGY

answered Sep 29 '20 at 08:53

Aman

1,502
1
8
13

Hi! That did solve the middle center problem, but how can I set border bottom on bottom as it was? Now it is just below text – Matej Sep 29 '20 at 08:58
Do you want a border on hover at the bottom of the header Please check again I have done changes https://codepen.io/rvtech/pen/JjXVgGY – Aman Sep 29 '20 at 09:06
Hi, Im not exactly sure how line-height helped there, but it worked! Thanks – Matej Sep 29 '20 at 09:13

score -1 · Answer 2 · answered Sep 29 '20 at 08:41

-1

From the screenshot, you can see that it is overwritten by the default <li> style. You can put text-align in .nav__item to overwrite that one.

Basically, li is "more specific" than the class of the parent element. Google for "CSS specificity" to learn more. (Alternatively, here's a w3schools link to save you a search)

answered Sep 29 '20 at 08:41

T Tse

786
7
19

Hi, I tried, still it is crossed and overwriten I dont know what is happening – Matej Sep 29 '20 at 08:50

Css text align overwriten by something

2 Answers2