Code for custom editing main menu bar spacing.

Highlighted
New Member
1 0 0

Hello Shopify community,

 

I hope someone out there can help. I am new to the forum.

 

I have been trying to edit my main navigation bar menu using google inspection to get the correct code to place into style.scss.liquid to change the spacing between my titles at the top of my page (the headings).

 

So I hope I am explaining this correctly as I am by no means an expert in this. I apologise if it sounds wrong.

 

so below is a screen shot of the title padding I wish to change. KIDS should be 25px from the menu title HOME. I have put this value into the green area as desired so I can get the correct code.

 

Screen Shot 2020-05-18 at 19.29.24.png

The code I tried to place into style.scss.liquid was: 

a.top-link.active. { padding-top: 0px !important; padding-left: 25px !important; }

 

But this just sent my site into a shambles with everything all over the place.

I cannot find the correct code to implement the correct padding width and despite going through google investigate the more I look into that specific element I only get these codes:

<li style="

    padding-right: 25px;

"><a href="/pages/duffel-bag" class="top-link ">KIDS</a></li>

 

None of them change the title in the desired way. 

 

Please can someone help me find what I am doing wrong.

I would like to get the menu padding between KIDS & HOME the same as shown in the screen shot above, with a padding of 25px as shown.

 

My theme is : RETINA FROM OUT OF THE SAND BOX.

 

Thankyou so much.

 

regards

 

styles.scss.liquid

0 Likes