Dawn Theme - Remove Menu Underlines and fix multi-row image heights

Topic summary

Main issue: two Dawn theme style problems—(1) header menu links showed constant underlines after making top-level items clickable; (2) multi-row About page images changed height/cropped as text grew.

Early fixes: CSS in base.css removed underlines globally and adding object-fit: contain for .image-with-text images kept image sizing consistent. This solved image cropping, but caused inconsistent menu behavior: dropdown links were never underlined, while the “About” link underlined on hover and when active.

Desired behavior: unified menu state—no underline by default; underline on hover; underline when on the active/current page.

Resolution: Add CSS in theme.liquid before to standardize link states (default none; underline on hover and active). OP confirmed this restored consistent behavior. The earlier image fix (object-fit: contain) maintained consistent multi-row image heights.

Status: resolved. Key actions:

  • Add CSS to theme.liquid to control hover/active underlines for all menu items.
  • Use object-fit: contain for image-with-text media to prevent cropping.

Notes: Code snippets are central to the solution; screenshots illustrate results but aren’t required to implement.

Summarized with AI on January 1. AI used: gpt-5.

Hi, Sorry this post got hide on another notification. Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “theme. Liquid” file. Find the tag and paste the code below before the tag.


And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

2 Likes