Jump to content

Create customised text in hamburger menu on desktop

Go to solution Solved by tuanphan,

Recommended Posts

I have customised the desktop menu to be a side menu like on mobile. However I'm trying to customise the text that goes above the navigation to have separate paragraphs. See example below for desired outcome. 

This is the text I want above the navigation:

Styled Habitat is a dynamic design studio based in Dubai.

For those with a discerning eye, and a craving for design that transcends the ordinary, we curate environments that speak to the soul.

We don’t just design rooms; we orchestrate experiences."

 

Here is the current CSS code I have: 

.header-menu-nav-folder:before {
        display: block;
        content: "Styled Habitat is an interior design studio based in Dubai, UAE.  They exist to realign this relationship for thedesign aware, well-traveled global citizen seekingelevated, thoughtful and original design.";
        font-family: 'SOHNE';
        font-size: 10px;
        line-height: 1.3em;
        letter-spacing: .08em;
        color: #F7F1E5;
        width: 70%;
        margin: auto;
        position: relative;
        top: 6vh
    }

 

Url: https://bumblebee-blenny-z38d.squarespace.com/
Password: styledhabitat

 

 

Screenshot 2024-07-15 at 11.30.21.png

Link to comment
  • Replies 1
  • Views 477
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

Use this code to Website Tools > Code Injection > Footer.

DO NOT USE CODE TO CSS BOX

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('<div class="menu-custom-text"><p>Styled Habitat is a dynamic design studio based in Dubai.</p><p>For those with a discerning eye, and a craving for design that transcends the ordinary, we curate environments that speak to the soul.</p><p>We don’t just design rooms; we orchestrate experiences."</p>').insertBefore('.header-menu-nav-wrapper');
});
</script>
<style>
  .menu-custom-text {
    color: #fff;
    padding-left: 7vw;
    font-size: 10px !important;
}

.menu-custom-text p {
    font-size: 10px !important;
    font-family: 'SOHNE';
    line-height: 1.3em;
    letter-spacing: .08em;
    color: #F7F1E5;
}
</style>

image.png.0c5645a89729af1838a535b9a7175722.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

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.