[Resolved] CSS for header

[Oleg]

Hi Tom!

I want menu as on the site: http://learn.javascript.ru

1) There must be order: logo, floating right menu, header widget. All in one line.
2) Header must be the full width of the page.

Thanks!

[Tom]

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 🙂

[Oleg]

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?

[Tom]

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.

[Oleg]

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

[Tom]

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

[Oleg]

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

[Tom]

I guess you would have to use margin as well:

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

[Oleg]

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

[Tom]

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

[Oleg]

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.

[Tom]

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;

[Oleg]

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

– a CSS for this need?

[Tom]

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 🙂

[Oleg]

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>

[Author]

Posts