0
I’m trying to make a Toolbar with flex, but the icons are taking the whole Toolbar when I step over with the cursor:
@media screen{
:root{
--primary-color: #29f1c3;
}
*{
margin: 0;
padding: 0;
}
img{
max-width: 100%;
height: auto;
}
/* Navgation */
.main-toolbar{
background-color: var(--primary-color);
width: 100%;
min-height: 56px;
display: flex;
justify-content: center;
}
.main-toolbar .menu-btn{
background: none;
border: none;
outline: none;
display: flex;
margin-left: 3%;
cursor: pointer;
}
.account-btn{
background: none;
border: none;
outline: none;
display: flex;
flex: 1;
flex-direction: row-reverse;
margin-right: 3%;
cursor: pointer;
}
}
<nav class="main-toolbar">
<button class="menu-btn">
<img class="menu-icon" width="48" height="48" src="../assets/icons/ic_hamburger.svg" alt="" />
</button>
<button class="account-btn">
<img class="account-icon" width="48" height="48" src="../assets/icons/ic_account.svg" alt=""/>
</button>
</nav>
As you can see by hovering the mouse over the entire Toolbar is selectable, as I do for only buttons to be selectable?
That is the problem
flex: 1
on its second button. If you have no specific reason, remove it and replace thejustify-content
in your classmain-toolbar
for:justify-content: space-between
. Will continue to look the same as now.– Renan Gomes
@Renan seems that the problem is the same, because you do not put as an answer?
– hugocsl
@hugocsl walking a little discouraged to participate. :/
– Renan Gomes
@Renan understand you well comrade, believe me! The situation is getting worse... Go ahead
– hugocsl
@Renan your comment solved me problem, thank you
– Samuel Ives