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

Adding logo and text to menu on mobile.

Question

Hi,

Is it possible to add logo and text to the menu on mobile?

I am using Brine template.

Regards

Edited by Campcamp
Initial Revision

Share this post


Link to post

11 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 faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


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

Share this post


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 faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


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

Share this post


Link to post
  • 0

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

Share this post


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...