Too much padding around top/bottom of logo

Sure, try the following CSS:

@media all and (min-width: 900px) {

  #title-info .logo {
    position: relative;
    top: -24px;
  }
  .site-header {
    padding-bottom: 0;
  }
  .site-header .container {
    position: relative;
    z-index: 99;
  }
}

The space above the logo is occupied by the top-navigation bar containing the search and social icons. The negative top value on the logo allows it to be “pulled up” into that space.

The site-header is then given a padding-bottom value of 0 to reduce the space below the logo.

Lastly, the position and z-index are added so that the top-navigation doesn’t cover the logo.

Hey Ben,

Thanks for the quick reply. That fixed the spacing issue nicely but now the search bar/icon are acting weird:

https://bigtechsimple.com

If that’s not easy to address, I’ll mention that I probably won’t make use of the secondary menu any time soon so maybe there’s a solution in that direction?

Regards,

Gregg

Gregg,

Okay I see. I’m going to add the complete CSS here with the fix. You can replace the code from my last post with this:

@media all and (min-width: 900px) {

  #title-info .logo {
    position: relative;
    top: -24px;
  }
  .site-header {
    padding-bottom: 0;
  }
  #site-header .top-navigation {
    z-index: 0;
  }
}

That should do the trick.

Hey Ben,

This is much better. But now the menu disappears at certain screen widths. I don’t want to take up too much of your time, and can look into it further, but I figured I’d mention it just in case you have any ideas off the top of your head on how to fix it.

Thanks again!

No worries, what’s happening is that the menu toggle button is disappearing from 600-800px. The main menu won’t show until >= 800px.

Because the above CSS doesn’t take effect until >= 900px, it must be caused by some other CSS in the child theme. Check if there is any CSS targeting the toggle-navigation because that is likely the root of the issue.

Ah. Perfect!

I had been playing around with some of the settings for the menu icon. I just removed them from my child theme except for a color and opacity change and now everything looks great!

Thanks so much for walking me through this!

Gregg

You’re welcome ??

If you’re happy with your experience, would you mind doing me a quick favor and leaving a review? It would really help me out.

Thanks!

TO ALL OTHER USERS: Please start a new thread even if you’re making similar modifications. Thank you!

Absolutely. Done!

Thanks!