Jump to content

Adding logo and text to menu on mobile.

Recommended Posts

@Campcamp add to Home > Design > Custom CSS


nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary:after {
   display: block;
   content: "Text";
}
nav.Mobile-overlay-nav.Mobile-overlay-nav--primary:before {
   display: block;
   content: "";
   background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/sonora-squarespace.jpg);
   width: 200px;
   height: 200px;
   margin: 0 auto;
}


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 9 months later...

Hi, I'm looking to add my site logo into my mobile menu overlay and make this a clickable item (so it goes to the homepage).
I think I'm halfway there, but I can't work out what I need to do next.

I've got tuanphan's code snippet above

nav.Mobile-overlay-nav.Mobile-overlay-nav--primary:before

to get the logo into the top of my menu, but can't work out how or where to add in the part that will make it a link. I'm thinking this needs to be added into a code injection somewhere as html, but not quite sure and feeling a bit stuck.

Can anyone help at all?

Thanks

 

Screen Shot 2020-06-29 at 16.04.38.png

Link to comment
16 hours ago, JohnNightingale said:

Hi, I'm looking to add my site logo into my mobile menu overlay and make this a clickable item (so it goes to the homepage).
I think I'm halfway there, but I can't work out what I need to do next.

I've got tuanphan's code snippet above


nav.Mobile-overlay-nav.Mobile-overlay-nav--primary:before

to get the logo into the top of my menu, but can't work out how or where to add in the part that will make it a link. I'm thinking this needs to be added into a code injection somewhere as html, but not quite sure and feeling a bit stuck.

Can anyone help at all?

Thanks

Hi. Can you share link? I can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi Tuan,

Thanks for looking. URL below...

https://lwp-workinprogress.squarespace.com

pw: LWP-Glyn01

 

I've looked around for an answer and not really finding anything useful.

The code I have so far to customise the mobile menu overlay is as follows:

 

Quote

 

.Mobile-overlay-menu {
    width: 100%;
    z-index: 1;
}

.Mobile-overlay-menu-main {
    padding: 0px 36px 36px 36px !important;
}

.Mobile-overlay-nav--primary {
    margin-top:20px;
}
  
.Mobile-overlay-nav--primary:before {
    display: block;
    content: "";
    background-image: url(https://images.squarespace-cdn.com/content/5ec3a27c7f0be537de917698/1589880645769-9UTHT4U8JK075AQGZXTO/LWP-sqlogo-fullcol%402x.png?content-type=image%2Fpng);
   background-position: top;
   background-size: 100% auto;
   background-repeat: no-repeat; 
   width: 80px;
   height: 80px;
   margin: 0px 0px 40px 0px;
}

.Mobile-overlay-close {
    padding: 46px 38px;
}

 

 

But is there a better way to put the linking image in there - maybe javascript or something?

Thanks again

Link to comment
  • 1 month later...
On 7/1/2020 at 4:32 PM, JohnNightingale said:

I've had to remove the experimenting I was doing, as I can't get this to work.

Thanks, if you were looking.

If any advice, then I really appreciate it - thanks

Have you found the solution yet?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

I was looking for this everywhere and I think I figured it out with a little bit of js. If you have your logo visible and linked to home on desktop, adding this script to header element in code injections worked for me.  I'm using Brine.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
Y.on('domready', function(){
var mobileLogo = Y.one(".Header-branding").cloneNode(true).addClass('mobile-logo');
Y.one(".Mobile-overlay-menu-main").prepend(mobileLogo);
});
</script>

I'm know very little js so if someone has a cleaner answer, I'm open to it. I just couldn't find a solution ANYWHERE so thought I would jump in. Hope it helps!!

Edited by AmandaMichele
Link to comment
48 minutes ago, AmandaMichele said:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Unless I'm mistaken you can drop the above line from your code. The code that follows after that line does not need it. Unless you are using jQuery code elsewhere that we cant see here.

The second script tag is using the YUI library.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.