Homepage Header a bit smaller than the other header pages

Store Design
1

the header is a bit smaller on the homepage, I would like the header to be as on the other pages

InkedScreenshot (36).jpg
InkedScreenshot (36).jpg1922×891 160 KB

InkedScreenshot (37).jpg
InkedScreenshot (37).jpg1930×898 125 KB

2

Hi @GeorgeRizos

Please send your site url

3

hi @Minakshi15 ,

website url is : https://thesnoozy.com/

password: 123

4

Hi @GeorgeRizos

Please add this Css

.header.page-width {
    padding: 3px 5rem;
    max-width: 100% !important;
}
5

this works, but it also makes it bigger on the other pages, I want it to be bigger just on the homepage to be the same as the other pages :slightly_smiling_face:

6

Please add home

home .header.page-width {
    padding: 3px 5rem;
    max-width: 100% !important;
}
7

If it’s work please add accepted as solution:)

8

sadly, it doesnt change anything

9

Please try this

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu {
    padding: 3px 5rem!important;
}
10

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
@media screen and (min-width: 750px){
.header.page-width {
padding-top: 5px;
padding-bottom: 5px;
}
}
11

it still changes all the header sizes. So, the homepage header remains smaller than the other pages

12

Hi @GeorgeRizos ,

Thank you for reaching out to the Shopify forums!

Let me quickly fix that issue for you.

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu {
    padding: 0px 5rem!important;
}

Please add the above CSS in your base.css file.

If its working then, please do not forget to accept this solution :slightly_smiling_face:

Thanks & Regards,
Prezen Tech

13

header is still smaller on homepage

1 Like
14

Please add this css code in theme.liquid file in head section

{% if page.handle == "index" %}

{% endif %}
15

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find layout >theme.liquid and paste this at the bottom of the file:
{% if template.name == 'index' %}

{% endif %}
16

great! this worked. Could you also give me the coding to put top padding to every page

1 Like
17

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.header.page-width {
padding-bottom: 10px;
}
18

yes, that’s to add bottom padding on the header page only, I’ve done this and it worked. Now I want to put top padding, but on all the pages.

1 Like
19 
.header.page-width { padding-top: 10px; }
20

still only works on the homepage