Jump to content

Header - Navigation drop down and adding phone number

Recommended Posts

Site URL: https://wellbeingcampus.com.au

Hello, 

I've searched through past posts and the codes are not working for my site. I have two issues. 

I am trying to change the title of the drop down box in the navigation/header to clickable. This has never worked for my site, so have I have had to change the title to something different so it's not repeated and confusing for people. 

1536184290_Screenshot2022-02-0213_44_51.thumb.png.18771f9d570700ca5ab43a89cf3160c7.png

 

Secondly, I would like to add my phone number to the header. Would anyone know how to do this? I've tried two codes (from searching old posts) and neither are working. Phone number is 1300 188 575 

 

Thanks heaps in advance for your help! 

Link to comment
  • Replies 3
  • Views 419
  • Created
  • Last Reply

Top Posters In This Topic

#1. Add to Last Line in Settings > Advanced > Code Injection > Footer

<script>
$(document).ready(function() { 
  // about
		$('a.header-nav-folder-title[href="/about-1"]').click(function() {
			var link = $(this).text(),
				href = "https://google.com";
			window.location.href=href;
		});
  // mental health
  		$('a.header-nav-folder-title[href="/mental-health-first-aid"]').click(function() {
			var link = $(this).text(),
				href = "https://facebook.com";
			window.location.href=href;
		});
  // individuals 
  		$('a.header-nav-folder-title[href="/individuals-1"]').click(function() {
			var link = $(this).text(),
				href = "https://pinterest.com";
			window.location.href=href;
		});
  // FAQs
    		$('a.header-nav-folder-title[href="/faqs-1"]').click(function() {
			var link = $(this).text(),
				href = "https://instagram.com";
			window.location.href=href;
		});
});
</script>

#2. Phone is clickable or non-clickable?

Phone next to button or?

Hide phone on mobile or?

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 2/11/2022 at 7:25 AM, Wellbeingcampus said:

Thanks so much. All seem to work except for the Mental Health First Aid title, I'm unsure why. 

 

In terms of the phone number, I would just like it listed in the header somewhere, perhaps under the Book a Course button. It doesn't need to be clickable. 

I just checked your site & found you used another code, not my code to add click. You should contact the code author.

It looks like your code by @creedon, ..

<script>

  $( ( ) => {
  
    /*
    
      begin make navigation folder URL Slugs clickable
      
      SS Version : 7.1
      
      */
      
      const folderToPageUrlSlugMap = {
      
        /*
        
          adding lines here is optional, when no lines are added the folder will
          link to the first page in the folder
          
          the format of each line is a folder page URL Slug and a destination
          page URL Slug
          
          for each folder page copy value from Folder Settings > General >
          URL SLUG field. you only need exactly what can be selected from the
          field
          
          for each destination page copy value from page Settings > General >
          URL SLUG field. you only need exactly what can be selected from the
          field
          
          */
          
        // '[enter folder page url slug here]' : '[enter page url slug here]',
        
        'mhfa' : 'mental-health-first-aid',
        
        }
        
      // do not change anything below, there be the borg here
      
      if ( ! Object.keys ( folderToPageUrlSlugMap ).length ) {
      
        $( '.header-nav-folder-title' ).each ( function ( ) {
        
          const key = $( this )
          
            .attr ( 'href' )
            
            .slice ( 1 );
            
          folderToPageUrlSlugMap [ key ] = '';
          
          } );
          
        }
        
      const keys = Object.keys ( folderToPageUrlSlugMap );
      
      $.each ( keys, function ( i, key ) {
      
        let url = folderToPageUrlSlugMap [ key ];
        
        if ( url )
        
          if ( ! url.includes ( '://' ) ) url = '/' + url;
          
        $( '.header-nav-folder-title[href="/' + key + '"]' ).each ( function ( ) {
        
          const $this = $( this );
          
          let $c = $this
          
            .clone ( )
            
            .removeAttr ( 'id' );
            
          if ( $c.hasClass ( 'preFade' ) )
          
            $c.addClass ( 'fadeIn' );
            
          if ( url )
          
            $c.attr ( 'href', url );
            
          $this.replaceWith ( $c );
          
          } );
          
        } );
        
      // end make navigation folder URL Slugs clickable
      
    } );
    
  </script>

 

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.