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
Of course! It’s here: https://info.technichegroup.com/techniche-ev
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!
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.
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.
Hope this will helps you out. Please mark it as Solution Accepted & Upvote to help other Community member.
Thanks!
Ahh got it, thanks so much Guarav!
