Jump to content

Drop Down Menu for ABOUT

Recommended Posts

Site URL: https://www.travelsandtreasures.com

UPDATE:  Please disregard - I figured out a way!

 

Hi there!

I am trying to redesign/streamline my site and I would like 3 pages linked to the ABOUT link (upper right corner of page):

  1. About Me
  2. Contact Me
  3. Press & Contributions

It was created using a folder and pages (see attachments), as found in a tutorial.

When I click ABOUT, it goes to the CONTACT ME page.  But I want a separate ABOUT pPage without having to duplicate the word/page in the dropdown menu.

Is there another way I should approach this?

Thank you for any input and feedback!

AboutLinks.png

AboutStructure.JPG

Edited by TTaylor
No longer need response
Link to comment

I see image is cut off on top. If you want to fix, add this to Design > Custom CSS

div#block-yui_3_17_2_1_1595456403422_5915 img {
    top: 0 !important;
}
div#block-yui_3_17_2_1_1595456403422_5915 .image-block-wrapper {
    overflow: visible !important;
}

cutoff.png.cbfcf648facc3746f1d581a3f77fafdf.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
12 hours ago, tuanphan said:

I see you wrote this: UPDATE:  Please disregard - I figured out a way!

Do you still need help?

Hi!  When I said I figured out a way, it's a clunky work around and I really don't  like it.  So yes, I still need help on how to make the "About" link go to a page of the drop down Menu without duplicating the word.

Edited by TTaylor
clarification
Link to comment

Add to Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.Header-nav-folder-title[href="/About"]').attr('href','https://google.com');
});
</script>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 1/12/2021 at 4:04 AM, tuanphan said:

Add to Code Injection Footer


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.Header-nav-folder-title[href="/About"]').attr('href','https://google.com');
});
</script>

 

@tuanphan

You are my favorite person.  I changed google.com to the "about me" page and now have the behavior that I wanted!  

** high fives ** and many thanks.

Link to comment
On 3/7/2021 at 9:36 PM, TTaylor said:

@tuanphan

You are my favorite person.  I changed google.com to the "about me" page and now have the behavior that I wanted!  

** high fives ** and many thanks.

Do you want to change header link icon to jumprope icon?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 3/16/2021 at 5:39 AM, TTaylor said:

I have two, but prefer to use the one on the right. 

photoofJRs.JPG

Sorry for the delay. Recently overloaded. Do you still need help?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 3/23/2021 at 9:28 AM, tuanphan said:

Sorry for the delay. Recently overloaded. Do you still need help?

Yes, please.  Looking to replace the "chain link" symbol with the Jumprope icon.  No rush, I understand you are servicing a LOT of users. 

Link to comment
On 3/27/2021 at 3:18 AM, TTaylor said:

Yes, please.  Looking to replace the "chain link" symbol with the Jumprope icon.  No rush, I understand you are servicing a LOT of users. 

Add to Design > Custom CSS. Replace with your icon

/* jumprope */
[href*="jumprope.com"] div {
    display: none;
}
[href*="jumprope.com"] {
    background-image: url(https://cdn.pixabay.com/photo/2020/12/23/11/50/lavender-5854761__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 3/30/2021 at 3:17 AM, tuanphan said:

Add to Design > Custom CSS. Replace with your icon


/* jumprope */
[href*="jumprope.com"] div {
    display: none;
}
[href*="jumprope.com"] {
    background-image: url(https://cdn.pixabay.com/photo/2020/12/23/11/50/lavender-5854761__340.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

 

Yay!  Thank you again and have a great week!

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.