Dawn theme footer and header customization

Store Design
, , , ,
1

I’m using the Dawn theme, in that I want to customize the header search bar and the footer subscribe bar in mobile view’s letter spacing, and make them in the middle. I’ll attach the reference image. Please help me to rectify that.

image
image368×651 31.1 KB

website: Amber By Deviriti

password: amber

2 Likes
2

Hi @Sivadarshan

First, duplicate your theme for safety and make the following edit on the new copy.

  1. In your theme’s code editor, go to the file: assets/base.css.
  2. Scroll to the very bottom of the file and paste this code:
/* Center and space mobile search/subscribe bars */
@media screen and (max-width: 749px) {
  .search-modal__form .search__input,
  .footer-block__newsletter .field__input {
    text-align: center;
    letter-spacing: 2px; /* Adjust as needed */
  }
}

Click Save.

Now, preview the theme on a mobile device to see the changes. If it looks correct, publish the theme.

Hope this helps!

1 Like
3

Hi @Sivadarshan ,

You can fix it by following these two simple steps:

Step 1: Click on Customize (see screenshot)
Step 2: Add the following CSS code:

@media (max-width: 768px) {
    label.field__label {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}

to the Custom CSS section (screenshot), then save and check the result (screenshot).

Let me know if this works for you or if you need further assistance :heart:

Best,
Felix

4

Hi @Sivadarshan

Thanks for clarifying and sharing the reference image. Since you’re using the Dawn theme, you can adjust the header search bar and footer subscribe bar styling for mobile view with a little bit of custom CSS.

You can try adding the following code in your Online Store > Themes > Customize > Theme Settings > Custom CSS (or through base.css if you’re editing the code):

/* Center align search bar and subscribe bar on mobile */
@media screen and (max-width: 749px) {
  .header__search,
  .footer__newsletter {
    text-align: center;
    justify-content: center;
  }

  .header__search input,
  .footer__newsletter input {
    letter-spacing: 1px; /* adjust as needed */
    text-align: center;
  }

  .footer__newsletter form {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

This will:

  • Center the search bar and subscribe bar on mobile view.

  • Adjust the letter spacing inside the input fields.

  • Ensure alignment is consistent with your design reference.

Once added, please clear your browser cache and check again on mobile.

5

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

.footer-block__newsletter .field__input { height: 3.9rem; }

Screenshot 2025-08-25 at 14.39.05
Screenshot 2025-08-25 at 14.39.05816×346 11 KB

6

Hi @Sivadarshan,

Please go to Customize > Theme settings > Custom CSS and add code:

.field .field__label {
    top: 50%;
    transform: translateY(-50%);
}
7

Hello @Sivadarshan, here you go. We need to adjust some other stylings as well, so we can get the desired results.

@media screen and (max-width: 749px) {
/* code by osamafarooqi71 */
.search-modal__form .field__label {
        text-align: center;
        width: 100%;
        left: 0px;
}

.newsletter-form__field-wrapper .field__label {
        text-align: center;
        width: 100%;
        left: 0px;
}
}

image
image647×908 51.8 KB

Please do let me know if you need any further assistance.

Regards

8

Hi @Sivadarshan ,
Please add the following CSS to the Custom CSS section of your header and footer:

@media (max-width: 768px) {
    label.field__label {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

*Result:

2025-08-25_16-16
2025-08-25_16-16701×908 47 KB