[Support request] Gap between Primary and Secondary Navigation because of Logo

[Bailey]

I have a Primary and Secondary Menu that are both Right Float. If I make the logo smaller than they both fit lined up with the Background. If I make the logo the size it needs to be at 230px then it seems to push the Primary Menu down but doesn’t effect the Secondary Menu. What setting am I missing that I need to adjust so that the menus align correctly?

Background Info: We are doing a rebuild of a website for a client that the previous web developer hardcoded too much into the child theme that left us with little ability for changes and modifications, possibly an attempt to prevent the client from switching to a new provider but it still happened anyway. A lot of what we are doing is an aesthetic replication but with a much cleaner backend. Aligning the Logo and both navigation is necessary to maintain the original aesthetic.

[Tom]

Hi there,

Try adding this CSS:

@media (min-width: 769px) {
    .site-logo {
        float: left;
    }
}

Let me know 🙂

[Bailey]

That totally worked. Somebody on Facebook gave me this CSS and it worked too:

.nav-float-right .inside-header .main-navigation {
float: right;
clear: right;
margin-top: -60px;
}

Which is better or are they basically the same?

Is there something causing the error or is there some way to fix without CSS?

[Leo]

Tom’s CSS is probably better.

It’s just needed for some layout like yours.

Let me know if you need more info 🙂

[Bailey]

It fixed it on some pages but it still seems to be showing up. Check out this page to see what I mean: https://kwcb.site/2017/07/07/top-10-ways-to-scare-a-buyer-away/

[David]

Hi there,

i am not seeing the issue on that page? Maybe browser cache? the only time the primary nav is forced below the logo is when the screen width is too small to accomodate it.

[Author]

Posts