0
185
ViewsBorder Bottom makes Material UI icons smaller when hovered
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;
}
3 answers
Answer question0
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;
}
0
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
0
Change this
.header__rightContainer svg:hover {
border-bottom: 4px solid blue;
}
to
.header__rightContainer svg:hover {
box-shadow: 0px 4px 0px 0px blue;
}
