Centered main menu with logo between links, logo is being cropped at bottom.

Hi, I hope someone might have some suggestions as to what could be causing this issue.
I’m using CSS in a child theme to position the company logo between main menu links but something is causing part of the logo to be cropped at the bottom (probably in part due to CSS used to remove the space above header for social icons/phone number), as if the width of the header needs to be increased to allow space for the logo.

View post on imgur.com

I’ve tried several suggestions from the forum and editing the existing CSS to increase the height of the header but so far nothing has worked.

Thanks for any suggestions.
Here is the current custom CSS I have in the child theme:

 /*------------------------*/
/* CSS - Hide tags on product pages
/*------------------------*/

.product_meta .tagged_as {
display:none;
}

 /*------------------------*/
/* CSS - Hide SKU on product pages
/*------------------------*/
.sku_wrapper {
display:none;
}

 /*------------------------*/
/* CSS - Remove space above header where social buttons were
/*------------------------*/
#header_meta .container, #header_meta {
  min-height: 0px;
  margin-bottom: 0px;
}
 /*------------------------*/
/* CSS - Logo center split menu
/*------------------------*/
@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#top #header .av-main-nav li:nth-child(3) {
  /* Adjust the width of the logo */
    margin-right:150px;
}
#header .main_menu {
    /*background: gold;*/
    top: 5%;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.av-main-nav-wrap {
    left: 50%;
    transform: translateX(-50%);
}
#header .logo {
    left: 50%;
    transform: translateX(-50%);
    z-index:999;
}
#header .logo img {    
    top: 60%;
    transform: translateY(-55%);
    max-width: 100px;  
}
/*------------------------*/
/* CSS - Remove product image radius/circle
/*------------------------*/
.av-catalogue-image {
border-radius: 0;
}
/*------------------------*/
/* CSS - Fix Woo product pages overlapping header
/*------------------------*/
.single-product .template-shop {
    padding-top: 80px;
}
}

• This topic was modified 4 years, 6 months ago by Leosoki.