Reducing line space between navigation links and underline

Site URL: https://jennydeluxe.com

I'm looking to decrease the spacing between the navigation links and their respective underlining.

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.

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.

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.

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.

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.