Hi, I would like the menu to end with the logo, Can someone help me with this? In addition, when I move my mouse over ‘‘vwo’’ the dropdown menu in the top bar appears with an animation. How can I remove this?
Topic summary
A user seeks help aligning their Shopify store’s dropdown menu to end at the logo position. They also want to remove an animation that appears when hovering over the ‘vwo’ menu item in the top bar.
Proposed Solution:
- Add custom CSS code to the
base.cssfile - The code adjusts padding and removes transition effects for the header section
- Targets screens with minimum width of 768px (desktop/tablet view)
Technical Details:
- Uses
!importantflag to override existing styles - Sets
transition: unsetto disable hover animations - Includes specific class selectors for the header sections
A screenshot demonstrates the expected result after implementing the CSS changes. The discussion remains open pending confirmation from the original poster whether the solution resolves their alignment and animation issues.
Hi @User026
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
@media (min-width: 768px) {
.header-body-sections--24039743750468__ss_header_4_3eQDGC {
padding-left: 28px !important;
}
.section-sections--24039743750468__ss_header_4_3eQDGC.header-sections--24039743750468__ss_header_4_3eQDGC.top.onscroll {
transition: unset !important;
}
}
Result
Best,
DaisyVo