Decrease space between logo and menu items

Hi, I have a website - www.cancerpointe.com. I think this topic has been asked before and I read many different posts but none of the advice helped me.

  1. I would like to decrease the space between the main site logo and the menu items as well as between the menu items and the bottom of the menu (where the black line is on my site). The menu is one that decreases in size when you scroll and I would like to decrease the described spacing both with the initial menu and with the menu after someone starts scrolling down the page.

  2. I would also like to I would also like to add black vertical lines between each menu item, if that is possible.

Thank you for your time!

Hello there,

To achieve those two, you’d need to add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-header {
      padding: 5px;
    }

    .site-logo {
      max-height: 40px;
    }

    @media only screen and (min-width: 1025px) {
      
      #mainnav ul.menu > li {
        border-right: 1px solid #000;
      }
      
      #mainnav ul.menu > li:last-child {
        border-right: none;
      }  
      
    } 

Regards,
Kharis

So I’ve been playing around with the CSS from some other recommendations on this site and I got the menu to look like I want it to for my front page. Unfortunately, the menu doesn’t format well for the rest of my pages besides the front page. Is there a way to achieve the effect that this CSS code does for my front page, but on all of the pages of the site? Code is as follows

.site-logo {
max-height: 80px;
}

.site-header.float-header .site-logo {
max-height: 40px;
}

.site-header.float-header {
background-color: #fff;
height: 90px;
}

.float-header .header-wrap .col-md-4 {
height: 35px;

}

.float-header .mainnav {
margin-top: 5px;
}

Hello there,

I found that couple of code also works on your inner pages. To check it yourself, you can add a border line, for example:

    .site-logo {
      max-height: 80px;
      border: 1px solid green;
    }

    .site-header.float-header .site-logo {
      max-height: 40px;
      border: 1px solid green;
    }

    .site-header.float-header {
      background-color: #fff;
      height: 90px;
      border: 1px solid green;
    }

    .float-header .header-wrap .col-md-4 {
      height: 35px;
      border: 1px solid green;
    }

    .float-header .mainnav {
      margin-top: 5px;
      border: 1px solid green;
    }

Regards,
Kharis