Megamenu alignment - need menu text to align with corresponding menu item

Store Design
1

I am using the sense theme. See Megamenu header screenshot:

Screen Shot 2023-05-12 at 12.40.12 AM.png
Screen Shot 2023-05-12 at 12.40.12 AM.png1174×873 93 KB

  1. I would like to keep the amount of padding of the content on the left, but have the text (“Sofas & Chairs”) align with the corresponding link (“Shop All”). So basically, shift it all to the left.

  2. How do I push down the content box so it starts where the header ends? I’ll probably change the background color, so it will look funny. Will that mess with the mouse responsiveness?

Thanks

2

@krozynski

Please share your store URL!

Thanks!

3

www.casakay.xyz

4

To align the text “Sofas & Chairs” with the corresponding link “Shop All” and shift it all to the left, you can use CSS to adjust the padding and margin of the elements. Here’s an example code snippet:

/* Adjust the padding and margin of the elements */
.collection-header__title {
  padding-left: 0;
  margin-left: -10px; /* Adjust this value as needed */
}

.collection-header__link {
  margin-left: -10px; /* Adjust this value to match the margin-left of .collection-header__title */
}

You can add this CSS code to your theme’s custom CSS file or use the built-in CSS editor in your Shopify theme editor.

To push down the content box so it starts where the header ends, you can adjust the margin or padding of the content box element. Here’s an example code snippet:

/* Adjust the margin or padding of the content box */
.content-box {
  margin-top: 20px; /* Adjust this value as needed */
}