Open mrmichaelque opened 3 months ago
The plan to solve the bug involves ensuring consistent styling across all menu items by leveraging CSS variables defined in vars.css
, correcting syntax errors, and adjusting padding and alignment properties in style.css
. Additionally, simplifying the HTML structure in MenuSlide.html
will help in managing styles more effectively.
The bug is caused by a combination of factors:
vars.css
, leading to inconsistencies in font appearance and alignment.style.css
, which could affect the rendering of styles.MenuSlide.html
make it difficult to manage styles effectively.Ensure that the CSS variables are correctly defined and used:
:root {
--md-text-font-family: 'Lato-Bold', sans-serif;
--md-text-font-size: 18px;
--md-text-line-height: 1.5; /* Adjusted for better vertical alignment */
--md-text-font-weight: 700;
--md-text-font-style: normal;
}
Simplify the HTML structure and class names:
<div class="menu-slide">
<div class="container">
<div class="logo-component-svg">
<div class="ellipse-2"></div>
<div class="ellipse-4"></div>
<div class="ellipse-3"></div>
<div class="ellipse-5"></div>
</div>
<div class="menu-item">Home</div>
<div class="menu-item">Profile</div>
<div class="menu-item">Projects</div>
<div class="menu-item">Blog</div>
<div class="spacer"></div>
<div class="menu-item sign-out">Sign out</div>
</div>
</div>
Correct syntax errors, ensure consistent padding, and use flexbox for alignment:
.menu-item {
font-family: var(--md-text-font-family);
font-size: var(--md-text-font-size);
line-height: var(--md-text-line-height);
font-weight: var(--md-text-font-weight);
font-style: var(--md-text-font-style);
padding: 16px 8px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.menu-item:hover {
transform: scale(0.95);
background-color: #9c8ce3;
border-radius: 50px;
}
.menu-slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.spacer {
height: 20px; /* Adjust as needed */
}
By following these steps, you should be able to replicate the misalignment issue reported in the ticket.
Ticket title: Navigation Menu Items
Ticket Description: Menu items are not all aligned with each other. May need to adjust padding, text display, etc.
By implementing the above changes, we ensure that the menu items are consistently styled and aligned, addressing the issues reported in the ticket.
Click here to create a Pull Request with the proposed solution
Files used for this task:
Menu items are not all aligned with each other. May need to adjust padding, text display, etc.