Drop Down Menu for ABOUT

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!

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;
}

On 5/21/2020 at 3:48 AM, tuanphan said:

.category-diary .BlogList-item-image {
    display: none !important;
}

 

Thank you -- I used the image focal point instead.  But if you have any ideas on how to make the ABOUT link go to a page, I'm all ears!

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

Do you still need help?

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.

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>

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.

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?

Yes, I have the asset.  Should I send to you?  I couldn't figure out how to use their logo instead of the "chain link".

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

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

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

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

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. 

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;
}

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!