[Resolved] How to put Logo, Header Menu and Search field in one horizontal line

[Karsten]

Hi Friends,

Could you please help me with some CSS: I would like to bring als features in my header in one horizontal line.

At the moment the Menu items are not in the middle of the header.

Please check here.

Thank you

[Leo]

Hi there,

Can you try setting the navigation location to float right first?

[Karsten]

I have done it now.

[Leo]

Give this CSS a shot:

.inside-header {
    display: flex;
    justify-content: space-between;
}

.inside-header .site-logo {
    order: 1;
    margin-right: auto;
}

.inside-header .header-widget {
    order: 3;
    margin-left: auto;
}

.inside-header .main-navigation {
    order: 2;
    margin-left: auto;
}

[Karsten]

Thank you, Leo, this code is very helpful.

I would also like to have the logo close to the first navigation element. Do you have some CSS for me which will position the logo closer to the first navigation element?

When I scroll down the website the Navigation menu moves completely to the right side which is not what I want.

Basically I would like this navigation design.

Thank you for your great support.

[Leo]

So basically you want the sticky navigation to be exact same as the static mode?

If so we will have to go with another method:
https://docs.generatepress.com/article/navigation-as-a-header/

[Karsten]

Thank you for this link which is helpful.

In order to get rid of the header on all pages and pages I used this CSS:

site-header {
    display: none;
}

Is that correct?

[David]

Hi there,

better to use the Layout Element then you can disable the Site Header on the Entire Site:

https://docs.generatepress.com/article/layout-element-overview/

[Karsten]

Thank you, David

I have done it like suggested.

One more issue:

The Logo is now located to close on the left edge. How could I move the Logo closer to the first main menu element?

[David]

Something like this – adjust pixels accordingly:

@media (min-width: 769px) {
    .main-navigation .inside-navigation:not(.grid-container) .navigation-logo {
        margin-left: 20px;
    }
}

[Karsten]

Thank you, David,

But this code does not do the job. Please check.

Also the header is still there as you can see here. I have deactivated the header in elements.

[Leo]

So for the header, you used Layout Element to disable the header and set it to Entire site?

That should absolutely work.

Any caching plugins?

[Karsten]

sorry, that was my mistake.

I forgot to set it to entire site. Thank you for your help. Now it works.

Now I still have the issue that I would like to position the logo closer to the main nav.

The Code that David gave me does not do the job.

Please help.

Thanks

[Leo]

Looks like David’s CSS is indeed working:
https://www.screencast.com/t/WOANHAXaE

Maybe try increasing the px number more?

[Karsten]

Yes, it works, but not completely.

For demonstation purpose I have increased from 20px to 400px and this brings the logo closer to the navigation elements, but also the navigation is moved to right side which does not lock good. Please check here.

I would like to have the navigation centered and the logo close to navigation.

[Author]

Posts