Change font header on Dawn theme to Brooklyn font

Store Design
1

Hello, I switched from the Brooklyn theme to Dawn theme because there is freedom to customize other tabs. But I really liked the font Brooklyn has for the header. Is there a way to change the Dawn header font to the same one like Brooklyn?

If not, I have a font I prefer as well.

Also, I wanted to adjust the image banner to be under the menu in the Dawn theme like the Brooklyn theme, but I cant figure it out. I tried two different codes and no luck.

2

You should be able to choose the same heading font in Dawn as in Brooklyn, they use the same selection of fonts all Shopify themes use by default. Just change the heading font in the theme editor by going to Theme settings > Typography.

3

I see that I have the font capitalized and this function is accessible with Brooklyn but not with Dawn. Is there a way to make the letters capatlized? I tried capitalizing my business name on the settings but it didn’t affect the theme.

4

I decided to use my own image and make it transparent.

but is there a way to move the banner image under the header? i can make the header transparent that’s no problem.

5

If you want all headings to be uppercase, add this to the bottom of assets/base.css:

h1,h2,h3,h4,h5,.h0,.h1,.h2,.h3,.h4,.h5 {
  text-transform: uppercase;
}
6

Not sure what you mean with the banner image. Can you illustrate it with a screenshot of what you’re referring to?

And what’s the address of your store? If you have a storefront password set under Online store >> Preferences, please post that here too or disable it, otherwise we can’t see your storefront. (NOTE: Do NOT post your admin password here, only the storefront password).

7

store password: prayrttttttt

The photo below demonstrates my goal. The image slides under the header when I scroll.

Screen Shot 2021-11-19 at 3.41.10 PM.png
Screen Shot 2021-11-19 at 3.41.10 PM.png2198Ă—1148 336 KB

This is without scrolling:

Screen Shot 2021-11-19 at 3.41.02 PM.png
Screen Shot 2021-11-19 at 3.41.02 PM.png2198Ă—1148 276 KB

Essentially, I’d like the header over the image, instead of above it (like the Brooklyn theme).

8

Try this:

Open Dawn in the code editor and open the file assets/base.css and add the following code at the bottom of the file:

.header-wrapper {
  position: absolute;
  width: 100%;
  background-color: transparent;
}

Also make sure you disable the sticky option of the header section in the theme editor.

9

I just realized the header should only overlap the image on the homepage but not on all other pages.

So instead of the above rather add the following code at around line 69 (after the tag) of sections/header.liquid :

{% if template == "index" %}

{% endif %}
1 Like
10

@ThomasBorowski Thank you so much this worked great!

11

The uppercase code did apply to all titles except the main menu titles on the header. What can I add to the code to uppercase the menu titles?

Thank you for your help.

1 Like
12

To make the header navigation menu items uppercase add this to assets/base.css:

.header__menu-item {
  text-transform: uppercase;
}
4 Likes
13

Thank You so much this code works great!

3 Likes
14

What if I dont want H2 on caps?

I removed “h2” from the code but it still shows as caps.

15

Sorry, it does work. My mistake.

What I mean is not capitalizing “h2.h1” headings.

The banners or rich text headings in have are in caps, I’m thinking of not having those in caps but keeping the others in caps.

16

Try adding this after the other styles in the CSS file:

h2.h1 {
  text-transform: unset;
}
4 Likes
17

It works! Thank you.

1 Like