Border Bottom makes Material UI icons smaller when hovered

user_8870206 0
Viewed 302

I'm working on this React app where the header have some Material UI icons. I have been trying to apply a border which would show at the bottom of the headen when hovered on each icon. But right now the borders are really close to each of their respective icons.

Another issue is the icons get smaller when hovered. I have been trying for hours now to fix it but nothing seems to work.

The icons should have 1.6rem of font size and the border must be 4px. How can I fix it?

Here's the CodeSandbox.

Here's the code for the Header Component:

import React from "react";
import "./Header.css";
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
import SettingsIcon from "@mui/icons-material/Settings";

const Header = () => {
  return (
    <header className="header">
      <div className="header__leftContainer">
        <h1>Logo</h1>
      </div>

      <div className="header__rightContainer">
        <SettingsIcon className="header__rightContainer__icons" />
        <PowerSettingsNewIcon className="header__rightContainer__icons" />
      </div>
    </header>
  );
};

export default Header;

Here's the css:

.header {
  width: 100%;
  background: yellow;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__leftContainer,
.header__rightContainer {
  padding: 15px 40px;
}

.header__leftContainer h1 {
  color: red;
}

.header__rightContainer svg {
  font-size: 1.6rem;
  margin: 0 15px;
  cursor: pointer;
}

.header__rightContainer svg:last-child {
  margin: 0 !important;
}

.header__rightContainer svg:hover {
  border-bottom: 4px solid blue;
}
material-ui reactjs css html javascript
4 Answers

Instead of applying padding to your left and right container, set a fix height of your header. Try this:

.header {
  width: 100%;
  background: yellow;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
}

.header__leftContainer,
.header__rightContainer {
  height: 100%;
  display: flex;
}

.header__leftContainer h1 {
  color: red;
}

.header__rightContainer svg {
  font-size: 1.6rem;
  margin: 0 15px;
  cursor: pointer;
  height: 100%;
  border-bottom: 4px solid transparent;
}

.header__rightContainer svg:last-child {
  
}

.header__rightContainer svg:hover {
  border-bottom: 4px solid blue;
}
user_116600350

Tried this:

.header {
  width: 100%;
  background: yellow;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
}
.header__leftContainer h1 {
  color: red;
}

.header__rightContainer {
  display: flex;
  flex-direction: row;
}

.header__rightContainer__icons {
  padding: 8px 24px;
  border-bottom: 4px solid yellow;
}

.header__rightContainer__icons:hover {
  border-bottom: 4px solid blue;
}

and

import React from "react";
import "./Header.css";
import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
import SettingsIcon from "@mui/icons-material/Settings";

const Header = () => {
  return (
    <header className="header">
      <div className="header__leftContainer">
        <h1>Logo</h1>
      </div>

      <div className="header__rightContainer">
        <div className="header__rightContainer__icons">
          <SettingsIcon />
        </div>
        <div className="header__rightContainer__icons">
          <PowerSettingsNewIcon />
        </div>
      </div>
    </header>
  );
};

export default Header;

Another issue is the icons get smaller when hovered.

I have solved this issue and manage to organized the code to be more easily to manage. Feel free to adjust the border width by changing the horizontal padding in .header__rightContainer__icons

user_135403490

That's because you add a border bottom when you hover your svg. Here you only want to change the color of your border bottom. Just add it this :

.header__rightContainer svg {
  font-size: 1.6rem;
  margin: 0 15px;
  cursor: pointer;
  border-bottom: 4px solid rgba(0,0,0,0);
}

But with this you need to resize correctly your svg as you like.

user_154154120

Change this

.header__rightContainer svg:hover {
  border-bottom: 4px solid blue;
}

to

.header__rightContainer svg:hover {
    box-shadow: 0px 4px 0px 0px blue;
}

Edit epic-sea-ejwuj

user_164740830
Related