Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding logo and text to menu on mobile.


Campcamp

Question

  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

15 answers to this question

Recommended Posts

  • 0

@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;
}


You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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 post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

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 post
  • 0

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 post
  • 0
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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
10 hours ago, creedon said:

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.

Good to know! Thank you!!

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...