Header showing up in the correct position on laptop, but not computer monitors

Store Design
, , , , , ,

Topic summary

A user’s transparent mega menu displays correctly on laptops but shifts upward on larger computer monitors, disrupting the intended overlap with a slideshow. They seek a solution to maintain consistent positioning across all screen sizes (excluding mobile).

Key Issues Identified:

  • The positioning approach uses fixed values that don’t scale proportionally across different viewport sizes
  • Poor contrast exists between light text and varying backgrounds, creating accessibility concerns
  • The design relies on arbitrary top-distance values rather than responsive techniques

Proposed Solutions:

CSS-based fixes using media queries:

  • Adjust #MainContent margin-top for screens above 1139px
  • Apply negative margin-bottom to header menu elements instead of modifying main content margins
  • Target specific section IDs with responsive margin adjustments for larger viewports

Alternative approach:

  • Add custom CSS code to theme.liquid file above the </body> tag

Design Recommendations:

  • Use percentage-based or viewport-relative values instead of fixed pixel offsets
  • Improve text contrast with larger font sizes, darker colors, or text shadows/backgrounds for better accessibility
  • Ensure positioning values scale proportionally with screen dimensions
Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hey all! I could use some help. I have my mega menu showing up in the correct spot on laptop, but when I look at my website on a computer monitor, it’s pushed up. I have a transparent mega menu that overlaps my slideshow, and this is the way I would like it to look on all screens (Excluding mobile. I have the mobile site looking the way I’d like it.) . Any ideas how I could have it show up in the same spot no matter the screen size?

Here is my website for reference: www.designsbymorticia.com

2

Before doing understand you apply personal preference into User Experience design while simultaneously undermining accessibility of the website.

There’s a bad contrast due to small font size text with a light text-color over arbitrary backgrounds.

Stick to good font-sizes and for faint colors always use some sort of backdrop either a background or even text-shadows.

Design - there will be inconsistency across devices because you are trying to arbitrarily hope you set the right distance from the top for content whose proportions change (i.e. on laptop or smaller the login&create-account links wrap to another row). This is another clue the approach to UX is wrong.

Where ever the offset is being added it needs to be adjusted to either be proportional to the page width|height , or be different values for different screen sizes.

A band**-aid** example with just simple percentage for screen sizes over 1140:

@media screen and (min-width: 1139px) {
 main#MainContent {
  margin-top: 2%!important;
 }
}

It would probably be better to try and not mess with the #MainContent margins and instead adjust the margin-bottom of the headers menu to be a negative value /shrug.

3

Hey @MorticiaEndzeit

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

Moeed_0-1691728954772.png
Moeed_0-1691728954772.png1905×934 314 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Hi @MorticiaEndzeit

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

@media screen and (min-width: 1139px) {
 #shopify-section-template--20192519029026__7dcce964-a4f1-4548-804c-fda388fc681c {
  margin-top: 30px !important;
 }
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly