Navigation wont center

Hi, Somehow, my navigation won't centre align top/bottom. What is going on? Maybe someone can help me. I just spent what feels like a lifetime searching for an answer.

Thanks for your help!

Can you share your website URL?

Sure, it is https://www.psychedelics.design/ Thanks for having a look!

I can see the problem, but it disappears every time I try and inspect the header, I'm not sure what's going on. Do you have any CSS or code on the website?

So bizarre. Thanks for having a look and sorry for the delay in replies I am dealing with family issues. 

So I have only CSS codes and they are as follows:

// *summary block font changes* //
.summary-title-link { 
  font-size: 24px; 
  line-height:1.7rem !important;
  font-weight: 400; }

.summary-excerpt p {
  font-size: 16px !important;
}

// *summary first non clickable* //
#block-yui_3_17_2_1_1685269573817_2973 .sqs-block-summary-v2 .summary-item {
    pointer-events: none
}

// *form button* //
.lightbox-handle.sqs-system-button.sqs-editable-button {
    width: 100% !important;
}

// *navigation drop down alignment* //
a.header-nav-folder-title:hover + div, .header-nav-folder-content {
    text-align: left !important;
    position: absolute;
    left: 105% !important;
    right: unset !important;
    -webkit-transform: translatex(-50%);
    -o-transform: translatex(-50%);
    transform: translatex(-50%);
  background: transparent !important;
}

// *Blog Title* //
/* Blog title overview */ 
.blog-basic-grid .blog-title {
  line-height:1.7rem !important;
    margin-top: -10px;
  margin-bottom: 15px;
}

/* Blog title single page */ 
.entry-title {
  line-height:2.8rem !important;
}

/* Mobile blog title single page */ 
@media screen and (max-width: 767px)
{
    .entry-title {
  line-height:2.0rem !important;
    }
}

//Invert header logo color on Specific Sections
body[class*="type-events"], [class*="type-products"], 
/* Home */
[id="collection-64732c0b151c9b4b39bf39e2"], 
{
header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}
  }

//Blog title top margin
.blog-item-title {
    margin-top: 10.5%;
}

//Newsletter input form
input {
 width: 375px;
 height: 25px;
}
  .newsletter-form-body {
    input.newsletter-form-field-element {
      // Styling the form input fields
      // including the "email" field
      letter-spacing: 0px;
      text-align: center;
    }
}

// Newsletter form button
body:not(.button-style-default) .newsletter-form .newsletter-form-button {    
  padding: .85rem .85rem !important;
  height: 47px;
  width: 285px;
}

//Landing summary 4 blocks
#block-yui_3_17_2_1_1685269573817_2973  .summary-item:nth-child(n+1){
  pointer-events:none;
}

//BURGER
@media screen and (max-width:640px) {
/* Burger position */
.burger-box {
    margin-right: -15px !important;
  }}

Does temporarily removing this code help? I can't see anything in there that could cause it but removing it might help diagnose.

Hi, tried that and this does not solve the issue. So strange no? Also updated the logo, check if that was the issue. Even when I remove the logo image, the problem is still the same. 

It is not a big deal but as a designer, it annoys the hell out of me. 

The Vertical padding is really annoying. I can't lower it. 

Is there a custom code for the top and bottom margins for the navigation on the desktop?

Thank you!

11 minutes ago, alexplesner said:

The Vertical padding is really annoying. I can't lower it. 

You can type in 1px.....

Hi it is already on 1 this did not change anything but thank you

Hi, 

Got it.

So 1px did not work but great thought!
The CSS code dit work thanks so much. But isn't it bizarre?

I attached screenshots of first the 1px test and then the Css code.

Thanks for the code and all the suggestions!

Have you solved it yet?

On 8/15/2023 at 12:18 PM, tuanphan said:

Have you solved it yet?

Hi yes, the code above worked. I marked it as "solution" thank you 🙂