Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Reducing line space between navigation links and underline


lizayala1211

Question

5 answers to this question

Recommended Posts

  • 0

Add the following to Design > Custom CSS.

.site-title.canvas-style-masthead-logo-left #topNav>nav>ul>li>a {

  padding-bottom: 13px;
  
  }

That is about half the space between than there was before. You can adjust the number to suit.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
3 minutes ago, creedon said:

This worked perfectly! I appreciate your help!

 

Would you also happen to know how it'd be best to go about changing the text within a navigation link once hovered over?

 

Add the following to Design > Custom CSS.


.site-title.canvas-style-masthead-logo-left #topNav>nav>ul>li>a {

  padding-bottom: 13px;
  
  }

That is about half the space between than there was before. You can adjust the number to suit.

Let us know how it goes.

 

Link to comment
  • 0
34 minutes ago, lizayala1211 said:

Would you also happen to know how it'd be best to go about changing the text within a navigation link once hovered over?

Are you thinking of something like changing the color? Add the following CSS.

body #topNav a:hover, body #topNav .active-link>a:hover {

  color: red;
  
  }

You can change the color to meet your needs. If you're thinking of another kind of change please describe in more detail.

Let us now how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
Just now, creedon said:

Not changing the color, but instead, once the link is hovered over the text would say 'Coming Soon'  rather than 'Work, Energy and Community Market'.

 

Are you thinking of something like changing the color? Add the following CSS.


body #topNav a:hover, body #topNav .active-link>a:hover {

  color: red;
  
  }

You can change the color to meet your needs. If you're thinking of another kind of change please describe in more detail.

Let us now how it goes.

 

Link to comment
  • 0
On 9/18/2020 at 4:45 PM, lizayala1211 said:

Not changing the color, but instead, once the link is hovered over the text would say 'Coming Soon'  rather than 'Work, Energy and Community Market'.

Add the following to your CSS.

#topNav nav ul>:nth-child(3):hover {

  border-bottom: none;
  
  }

Add the following to Settings > Advanced > Code Injection > FOOTER. 

<script>

  $( ( ) => {
  
    $( '#topNav nav ul li:nth-child(3) a' ).hover (
    
      function ( ) {
      
        let $this = $( this );
        
        let w = $this.width ( );
        
        $this
        
          .data ( 'data-default-text', $this.text ( ) )
          
          .data ( 'data-default-style', $this.attr ( 'style' ) )
          
          .text ( 'Coming Soon!' );
          
        if ( $this.width ( ) < w ) $this.width ( w );
        
        },
        
      function ( ) {
      
        let $this = $( this );
        
        let s = $this.data ( 'data-default-style' );
        
        $this.text ( $this.data ( 'data-default-text' ) );
        
        if ( typeof s == 'undefined' ) {
        
          $this.removeAttr ( 'style' );
          
          } else {
          
            $this.attr ( 'style', s );
            
            }
        }
        
      );
      
    } );
    
  </script>

Let us know how it goes.

Edited by creedon
version 2 of script, corrected syntax error

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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...