[Resolved] Merge top bar with page hero and primary menu

[Gina]

Hi there,

I would like to merge the top bar with my page hero.
I tried to apply a few things that I have found here, in the support forum. If I am right, at the moment I have the top bar set with a transparent background, but as you can see on the website it is not fully integrated.

Could you please give me two options:
1, Merge the top bar with the page hero (I basically want the social icons to be in the top bar)
I only use page hero on the home, so that is why I feel like the second option may be better.
2, Put the social icons inside of the main menu in the same row. (logo – menu items – social icons)

Many thanks for your help,
Gina

[Ying]

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 🙂

[Gina]

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.

[David]

Hi there

you can use this CSS:

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

[Gina]

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

[David]

try adding this CSS to your site:

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

[Gina]

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

[Ying]

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;
}

[Gina]

Wonderful, thanks Ying!

[Ying]

You are welcome 🙂

[Author]

Posts