Control Header and Footer margins for Shopify Narrative Theme

Store Design
1

Hello

Is there any way to control the of the Header & Footer margins in a Shopify Theme.

I am using the Narrative Theme.

I want to have the headlines throughout the site Left Aligned. I want the navigation elements in the header to align with the headlines.

From the image below you can see that the hamburger menu is not aligned with the headline. Is there any way to achieve this with CSS?

Screenshot 2021-08-09 at 12.15.21.jpg
Screenshot 2021-08-09 at 12.15.21.jpg2794Ɨ1264 153 KB

2

@JK16

Please share your store URL.

3

https://map-40-1.myshopify.com/?key=45eacb97cbf2b29357860eb7003a26cbe29c9b1f317be6f5ca16079ac1205395

1 Like
4

hii, @JK16
Paste this code in top theme.scss file.

button.site-header__navigation.btn.btn--clear.btn--square span {
    margin-left: -197px !important;
}

Thank You.

5

Thanks. but not quite right. Moves hamburger over but not accurate to align with headline.

Need a solution that sets the margins for the left and right of the header & footer so I can match this with the margins for the Headlines.

Any ideas?

6

@JK16

Please add the following code at the bottom of your CSS file.

._pf .pf-4 {
padding-left: 145px !important;
}

Hope this works.

Thanks!

7

@JK16
Paste this code in top of theme.scss file.

button.site-header__navigation.btn.btn--clear.btn--square span {
    margin-left: -183px !important;
}

Thank You.

8

Thanks for the ideas.

As Iā€™m using PageFly for the pages I need a way to measure in from the left as this is how I place the headlines with padding.

I think these 2 solutions are measuring from the centre and pushing the navigation hamburger over to the left but not measuring from the left.

Does this make sense?

1 Like
9

Hi @JK16 ,

This is PageFly here,

In this case, I highly recommend asking our support team for help. Currently, the logo has a 30px padding-left; you can adjust the content below to fit this parameter. You can measure the parameter by using the inspecting feature of your browser: https://www.hostinger.com/tutorials/website/how-to-inspect-and-change-style-using-google-chrome

Cheer,

1 Like