Change homepage layout on mobile version with custom css

Site URL: http://klaenemasonry.com

Hello. The mobile version of my homepage has an issue with the navigation links overlapping text. I don't want to do an overall edit as I like the layout of the desktop and tablet version. How can I edit this for only the mobile version? I am okay with taking the text out and leaving my business heading and navigations only. Thank!

4 minutes ago, Klaene said:

Site URL: http://klaenemasonry.com

Hello. The mobile version of my homepage has an issue with the navigation links overlapping text. I don't want to do an overall edit as I like the layout of the desktop and tablet version. How can I edit this for only the mobile version? I am okay with taking the text out and leaving my business heading and navigations only. Thank!

Hi @Klaene I see you are using Cover page on which we cann't apply any CSS or anything to Fix it , What you can do is to go to styling of cover page and decrese the line height of nav font. It will fix the issue 🙂

4 minutes ago, humxahafeex said:

Hi @Klaene I see you are using Cover page on which we cann't apply any CSS or anything to Fix it , What you can do is to go to styling of cover page and decrese the line height of nav font. It will fix the issue 🙂

Cover Page has Page Header, to insert CSS ✌️

3 minutes ago, tuanphan said:

Cover Page has Page Header, to insert CSS ✌️

🙏 Oh Thank you , Feeling Dumb.... Thank you again 🙂

Thank you for the responses. I’m confused, can I adjust with css? If so, how?

10 minutes ago, Klaene said:

Thank you for the responses. I’m confused, can I adjust with css? If so, how?

Hi , Sorry If you got confused , You can use the following code to get it fixed. Just simply click on gear icon in front of page name it will pop up a list of options from there select advance and you will see some space to put in code paste the code there it will fix the issue right away. Pics are also attached to assist you in better way.

<style>
  [data-slice-type="navigation"] ul li:not(:last-child) {
    margin-bottom: 0px !important; 
}
</style>

Hope it helps. Don't forget to mark it as solved if it works 🙂 

Thank you so much for helping. Unfortunately, it didn't quite fix it. The top navigation button "bio" is still overlapping the text. We're so close😁

8 minutes ago, Klaene said:

Thank you so much for helping. Unfortunately, it didn't quite fix it. The top navigation button "bio" is still overlapping the text. We're so close😁

Add this code too.

.sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper.stacked .sqs-slice:not(:last-child):not([data-content-empty="true"]) {
    margin-bottom: 0px !important;
}

It didn't change anything

1 minute ago, Klaene said:

It didn't change anything

Can you share a screenshot as , It looks good on my end.

I tweaked it and it worked. Thank you so much for your help!

How do I mark solved?

Just now, Klaene said:

How do I mark solved?

Awesome , Glad it worked , Just simply click on arrow up on top left of answer 🙂