Blog, Website & Page Publishing

JRooney1987
Participant

Padding / Margin in global header

SOLVE

Hi all,

 

I've been working on a new landing page using a global header that includes a left-aligned logo and a navigation, but I can't figure out how to reduce the gap between the logo and the first menu item. The reason I need to reduce it is 1) because the menu is spilling onto a second line, and 2) to match the client's actual website.

 

I assume I need to edit the padding/margin of the logo or the menu, but can't find the correct line of code in the Design Tools.

 

Thanks!

 

John

0 Upvotes
2 Accepted solutions
GRajput
Solution
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Padding / Margin in global header

SOLVE

Hi @JRooney1987 

 

Please add this CSS to the header module.

 

@media(min-width:767px){
.header__menu-item--depth-1 {
padding: 0px 0.3rem;
}
.header__container--left .header__menu-col {
flex: 4 0 0;
}

}
@media(min-width:991px){
.header__container--left .header__menu-col {
flex: 3 0 0;
}
}

 

Hope this will helps you out. Please mark it as Solution Accepted & Upvote to help other Community member.
Thanks!




Gaurav Rajput
Director, MarTech( Growth Natives)

Book a meeting


View solution in original post

GRajput
Solution
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Padding / Margin in global header

SOLVE

Hi @JRooney1987 

There will be a module folder in your theme. You will find the header module in that folder, then go to the header's module.css editor and add your css in it.

GRajput_0-1701952435109.png

 

Hope this will helps you out. Please mark it as Solution Accepted & Upvote to help other Community member.
Thanks!




Gaurav Rajput
Director, MarTech( Growth Natives)

Book a meeting


View solution in original post

6 Replies 6
GRajput
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Padding / Margin in global header

SOLVE

Hi @JRooney1987 

Can you please provide the link of the page.

 

Thanks!




Gaurav Rajput
Director, MarTech( Growth Natives)

Book a meeting


0 Upvotes
JRooney1987
Participant

Padding / Margin in global header

SOLVE
GRajput
Solution
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Padding / Margin in global header

SOLVE

Hi @JRooney1987 

 

Please add this CSS to the header module.

 

@media(min-width:767px){
.header__menu-item--depth-1 {
padding: 0px 0.3rem;
}
.header__container--left .header__menu-col {
flex: 4 0 0;
}

}
@media(min-width:991px){
.header__container--left .header__menu-col {
flex: 3 0 0;
}
}

 

Hope this will helps you out. Please mark it as Solution Accepted & Upvote to help other Community member.
Thanks!




Gaurav Rajput
Director, MarTech( Growth Natives)

Book a meeting


JRooney1987
Participant

Padding / Margin in global header

SOLVE

Thanks for that Gaurav. When you say add to the 'header module', where do you mean specifically? I tried adding it into the Head section in the landing page editor (Settings -> Advanced) but that didn't work.

 

In the Design Tools there are three sections I can edit:

 

module.html

module.css

module.js

 

I added to module.css but nothing seemed to change.

GRajput
Solution
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

Padding / Margin in global header

SOLVE

Hi @JRooney1987 

There will be a module folder in your theme. You will find the header module in that folder, then go to the header's module.css editor and add your css in it.

GRajput_0-1701952435109.png

 

Hope this will helps you out. Please mark it as Solution Accepted & Upvote to help other Community member.
Thanks!




Gaurav Rajput
Director, MarTech( Growth Natives)

Book a meeting


JRooney1987
Participant

Padding / Margin in global header

SOLVE

Ahh got it, thanks so much Guarav!