Overlapping Drop Down Arrows and Getting my Text onto One Line for Mobile Navigation

Store Design
1

Hi! I bought licensing to a template on Creative Market and it has intergrated beautifully with my website, however, on the mobile view of my site, the drop down arrows are overlapping with my text and some of my text is on two lines instead of one. I’m not the greatest coder but I tried a few things, non that helped.

Here is the link to my site and an image of what I mean

https://uixbbltvhc08k709-7293927487.shopifypreview.com

Screen Shot 2022-01-30 at 12.44.08 PM.png
Screen Shot 2022-01-30 at 12.44.08 PM.png785×1406 61 KB

2

@yaelifineart ,

Please add this CSS to your theme

.mobile-nav__item .btn--link{
    width: 100%;
}
.mobile-nav__item{
    text-align: left;
}

Thanks!

3

Thank you so much for replying! I added the code but it didn’t fix anything…

4

Oh! It worked! For anyone else who needs this code, make sure to put it into theme.css and NOT theme.liquid