Add Your Logo To Your Mobile Menu

This weeks CSS tutorial will show you how to add a logo to the mobile menu on your Squarespace website, specifically for Brine and Bedford templates where that isn't standard. Watch the tutorial to learn how to upload your image, and then use the codes below in the Custom CSS section of your site to show off that beautiful brand of yours


 
 

BEDFORD

#mobileNavWrapper { margin-top:20px; background-image: url('HTTPS://YOURIMAGEURLGOESHERE.COM'); background-position: top; background-size: 50% auto; background-repeat: no-repeat; } #sidecarNav nav {padding-top:50px}

BRINE

.Mobile-overlay-nav-item { padding-top:60px;}.Mobile-overlay-menu {width: 100%; z-index: 1;}.Mobile-overlay-menu-main { margin-top:50px; background-image: url('HTTPS://YOURIMAGEURLGOESHERE.COM'); background-position: top; background-size: 50% auto; background-repeat: no-repeat;}

Ready for more mobile modifications?

Then today is your lucky day! I just put the finishing touches on my new Guide to Mobile Modifications. It contains over 20+ CSS codes specific for the mobile version of your Squarespace website. Get all the details here: