Jump to content

Adding Text blocks to Mobile Menu

Recommended Posts

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

Link to comment
  • 1 year later...
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!)

Link to comment
  • 1 month later...

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

Link to comment
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!)

Link to comment
  • 2 weeks later...

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

Link to comment
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!)

Link to comment
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!)

Link to comment
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!)

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.