Menu button placement in different places

Store Design
, , ,

Topic summary

A user is attempting to reposition menu buttons on their Shopify store’s enter page. Currently, the HOME, CATALOG, and CONTACT buttons are arranged horizontally, but they want HOME at the top and CATALOG & CONTACT at the bottom.

Current Issue:

  • Existing CSS code using position: absolute isn’t successfully moving the HOME button
  • The user provided their site URL (password-protected) and shared both their custom CSS and enter page code

Proposed Solution:
A community member suggested two CSS approaches:

  1. Target the second menu item (CATALOG) with margin-top: -40vh
  2. Target links with href="/" (HOME button) with the same negative margin

Both solutions use !important to override existing styles.

Status:
The user tested the first solution but reported it only moved the CATALOG button, not HOME. They’re now being asked to try both alternative CSS snippets to see which works. The discussion remains open pending confirmation of a working solution.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
3

Hi @StafMeister , try the below code:

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
<style>
.menu-list .menu-item:nth-child(2) {
  margin-top: -40vh !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!