Jump to content

Adding Text blocks to Mobile Menu

Recommended Posts

Posted

Hi, I’m wanting to add text blocks similar to the attached example in my mobile overlay menu so it displays phone, email and address details. I also want to be able to control the formatting. Thanks in advance for any help! 

1BAB9710-3CA0-46E2-BC14-5B2E5FAD656B.png

  • 1 year later...
Posted
On 10/28/2023 at 12:01 AM, daniellenoakes said:

I would love the answer to this please if  possible to do a similar thing! 

www.kathrynbraunton.co.uk
pw: makeup

business plan, 7.1 fluid engine. 

I see you fixed with this CSS code?

 .header-menu-nav-folder:after {
        display: block;
        content: "KATHRYN BRAUNTON BRIDAL MAKEUP ARTISTRY - EST.2006 - SERVING SOUTH GLOUCESTERSHIRE & BEYOND";
        font-family: 'alma-mono';
        font-size: .4em;
        line-height: 1.5em;
        letter-spacing: .2em;
        color: #1b1b1b;
        width: 70%;
        margin: auto;
        position: relative;
        top: -10vh
    }

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 month later...
Posted

I am looking to do something similar on my site, but instead of showing my nav links I would like to just have an about me section. Just some type on then my contact info. 

So I would like the user to click on the hamburger and see info about me. 

Let me know if that is possible.

Thanks

Posted
On 12/23/2023 at 12:29 AM, ericlamb said:

I am looking to do something similar on my site, but instead of showing my nav links I would like to just have an about me section. Just some type on then my contact info. 

So I would like the user to click on the hamburger and see info about me. 

Let me know if that is possible.

Thanks

Add this to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<div class="mobile-custom-info"><p>Yeah, but your scientists were so preoccupied with whether or not they could, they didnt stop to think if they should</p></div>').insertBefore('.header-menu-actions.social-accounts');
});
</script>
<style>
  .mobile-custom-info {
  	padding-left: 3vw;
  }
</style>

image.png.803e6fb331d8e5b7d420fd609524bd04.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 weeks later...
Posted

This is great, but would like to have the text center justified and center aligned within the menu. Like the attached image. Is it possible to have a link out to a website on there as well?

I am trying to use the flyout menu as my about me section instead of nav links. 

Also would it be possible to change the hamburger to "about"?

www.creativelamb.com

 

text.jpg

Posted
On 1/3/2024 at 2:31 AM, ericlamb said:

This is great, but would like to have the text center justified and center aligned within the menu. Like the attached image. Is it possible to have a link out to a website on there as well?

I am trying to use the flyout menu as my about me section instead of nav links. 

Also would it be possible to change the hamburger to "about"?

www.creativelamb.com

 

text.jpg

I see you removed burger. Do you still need help with this?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 1/4/2024 at 10:04 PM, ericlamb said:

Yes I do. My site is live and I didn't want to have it be blank. Should I put it back on?

Some options to achieve this

(1) Add a Text Block in your site Footer, then I will give code to move it into your menu

(2) Use this below code to add text to that position. Code should add to Website Tools (Under Not Linked) > Code Injection > Footer. Replace text/google link in the code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<p class="custom-text">Enter your text here enter your text here <a href="https://google.com">Here is link</a></p>').insertBefore('.header-menu-nav-wrapper');
});
</script>
<style>
  p.custom-text a {
    display: ;
    border-bottom: 1px solid;
}
</style>

image.png.5505d865c9b1b2b7e5ee0c0a53f56f72.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

This is awesome. Ok I put a blank text box on my footer. Let me know how we move that into the fly-out menu?

Also is it possible to change the hamburger icon to something else? "About Me" Or an Icon?

Posted
On 1/9/2024 at 1:50 AM, ericlamb said:

This is awesome. Ok I put a blank text box on my footer. Let me know how we move that into the fly-out menu?

Also is it possible to change the hamburger icon to something else? "About Me" Or an Icon?

I don't see it. Can you check it again?

image.thumb.png.af5b6b5766331f488b3ba241985e81b9.png

Change burger only or change burger & X icon?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 6 months later...
Posted

@tuanphan Hi! I love the look of the above. In an ideal world, I would like to get to the below. My two-column text is too spaced out though and I can't seem to add in the social icons and hyperlinks. Any suggestions on code to get to something like the below? I added a text box to the footer, but couldn't get the footer code to do anything, so I removed the footer code. https://calliope-pike-83z2.squarespace.com PW: JUL25JUL25 Huge thanks! I have been following lots of your other posts, so thank you!!

image.thumb.png.712fb35971fe14397ab2c546d11d5236.png

Posted
On 7/25/2024 at 7:49 PM, SSA said:

@tuanphan Hi! I love the look of the above. In an ideal world, I would like to get to the below. My two-column text is too spaced out though and I can't seem to add in the social icons and hyperlinks. Any suggestions on code to get to something like the below? I added a text box to the footer, but couldn't get the footer code to do anything, so I removed the footer code. https://calliope-pike-83z2.squarespace.com PW: JUL25JUL25 Huge thanks! I have been following lots of your other posts, so thank you!!

image.thumb.png.712fb35971fe14397ab2c546d11d5236.png

#1. To make X white, use this code to Website Tools > Custom CSS

body.header--menu-open div.burger-inner>div {
    background-color: #fff !important;
}

#2. You mean move this to menu?

image.png.2029a3c36304493af0aa96fa694208f6.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

Re: 1, that worked! Thank you!

Re: 2, that could work, though I was hoping to style it like in the screen shot (I have the text, but no hyperlinks and can't figure out formatting or how to hide the Contact Button showing underneath). I'm not wed to that layout if your idea is easier though. Many thanks!!

  • 3 weeks later...

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.