CSS for header

Hi there,

1. Use the navigation logo to add your logo to the navigation, then hide your main header:

.site-header {
    display: none;
}

Adding the header widget into the navigation would require custom programming, but those elements can be added as custom menu links. For example: https://generatepress.com/knowledgebase/menu-social-icons/

2. This should do it:

.inside-header.grid-container {
    max-width: 100%;
}

You can definitely achieve something very close to what they have there :)

I have chosen to display the menu in the header float right.
I also use a widget in the header.
Default widget in the header is displayed over on the menu.
How to make, so it appears to the right of the menu?

Hmm, you could try this:

.nav-float-right .inside-header .main-navigation {
    clear: none;
}

However, I highly suggest just adding your content as a menu item.

Thank you!
How to add a top margin for this widget?

.header-widget {
    margin-top: 10px;
}

Thank you!
And the last.
How to align with the menu in the middle? Between the logo and the widget.

I guess you would have to use margin as well:

@media (min-width: 769px) {
    #site-navigation {
        margin-top: 10px;
    }
}

I mean, in width. I want this: Left logo, the menu in the center of the widget on the right.

I think you might be better off going with a method like this: https://generatepress.com/forums/topic/header-layout/#post-217337

I made for your recommendation:

Problems:

"grid-33 navigation-area" - Not fully fit. We need more space.

"grid-33 social-icon-area" - Not aligned to the right. It is necessary to align the right edge.

It will require you to adjust it as you need to.

Adjust the grid percentages to give it more space, just make sure they add up to 100.

Target the .social-icon-area class and add text-align: right;

Adjust the grid percentages to give it more space, just make sure they add up to 100.

- a CSS for this need?

You can just adjust the grid-33 class.

First column: grid-20

Second column is: grid-60

Third column: grid-20

= 100

That might work better :)

Yes, but how to write correctly in CSS? Let it be 20, 60 and 20

<div class="grid-33 logo-area">
    <img src="http://obuylov.ru/test10/wp-content/uploads/sites/26/2016/10/cropped-RT_logo_eng_v2.png" alt="" />
</div>
<div class="grid-33 navigation-area">
    <?php generate_navigation_position(); ?>
</div>
<div class="grid-33 social-icon-area">
    Social icons HTML/widget here
</div>