Merge top bar with page hero and primary menu

Hi Gina,

For option 2, it can be achieved by using Hook element or Block element.
https://docs.generatepress.com/article/hooks-element-overview/
https://docs.generatepress.com/article/block-element-overview/

Block element is like the visual version of hook element using Gutenburg instead of HTML.

You can add social icons in to the element content field, choose Hook as Block type if you use block element, then choose generate_menu_bar_items as hook.
https://docs.generatepress.com/article/generate_menu_bar_items/

Let me know how it works :)

Hi Ying,

Thank you, I got it!

One more question, how can I decrease the size of the merged page hero's logo?
Not the general logo, but the one that I have uploaded in the header element.

Hi there

you can use this CSS:

.site-logo.page-hero-logo img {
  max-width: 200px;
  height: auto;
}

Thanks David,

CSS for logo size worked perfectly.

I used the block element in order to add the social icons to the merged menu, as Ying recommended me.
I have white social icons so when I scroll down they disappear from the menu.
Please help me out with the CSS for black color transformation.

Also, how can I make it to have the logo left centered, social icons right centered, and the menu centered in the middle?

Many thanks for your help,
Gina

try adding this CSS to your site:

#sticky-navigation .gb-button-wrapper a.gb-button:not(:hover) .gb-icon {
  color: #000;
}

Done, many thanks.

I only have the concern with the layout of the menu. When the menu items are set to the right, I could put them kind of in the middle using the padding of the social icons on the right, but this way it does not adapt to different devices with different screen sizes.

Is there a way to set the logo on the left the menu items in the middle and social icons on the right?

Thanks again for your help

Hi Gina,

You could give this CSS a try:

.menu-bar-items .gb-container .gb-inside-container .gb-button-wrapper {
    margin-left: 0;
}
.nav-align-right .navigation-branding {
    margin-right: 0;
}
#primary-menu {
    margin-left: auto;
    margin-right: auto;
}

Wonderful, thanks Ying!

You are welcome :)