Logo on two rows

Hi there,

what is in the 1st row Items ?

In the first row : social links, phone, adress

Hi there,

You can try use a generate_menu_bar_item hook to add social links/phone/address, then add this CSS:

.inside-navigation {
    flex-direction: column;
}
.menu_bar_items {
    order: -1;
}

Note: DO not use use navigation as header option.

Let me know how it works :)

Results
Hello
The test is the item : Phone
without Css , Phone is to right
with your Css, Phone is under

The social icons are added using header widget, the CSS is based on adding phone/social icons using generate_menu_bar_item hook.

I see you are already using Generateblocks, then you can simply use Buttons block with built-in social icons in block element (generate_menu_bar_item)instead of using light weight social icon widget.

This video demonstrates how to add social icons to top bar, in your case just change the top bar to menu_bar_items.
https://youtu.be/yAleVWQi5EA
Let me know if you need further assitance.

Testing Page
Hello
In this case of a page where I do not display the top bar and I display this element block:
- How to insert the navigation menu?
- How to use the generate_menu_bar_item hook?

Sorry maybe I didn't make myself clear, the point of the video is to show you how to use Generatbelocks to add social icons.

I see you already added social icons using GB, that's a good start.

Seems you are using site_header as element type, change it to hook, and choose menu_bar_items

Keep me updated.

After change
Thanks for the video link.
After switching to hook, the result is not good.
The global header reappears.
What I would like is for the navigation menu to be below the social links

You are welcome :) Try to add this CSS to customizer > additional CSS:

nav#site-navigation .inside-navigation {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.menu-bar-items {
    order: -1;
}

Let me know :)

This almost that.
The top row (image and social links) should be the same width as the main menu bar.
And how can we ensure that only the logo and the title are not displayed on this page?

Hi there,

Try adding this CSS:

.main-navigation .menu-bar-items, .main-navigation .menu-bar-items .gb-container {
    width: 100%;
}

This'll be the effect - https://share.getcloudapp.com/nOuPB9Ng

Thank you so much. The given code gives the desired effect.
Finally, I wanted to know how it was possible not to display the logo and the title on this page.
And so the block we just customized could take up the entire page width?

I wanted to know how it was possible not to display the logo and the title on this page.
And so the block we just customized could take up the entire page width?

If you can show a mock-up image of what exact layout you're trying to achieve, we can try doing it with CSS writeups.

Are you aiming for something like this?

Or do you want to remove the site logo and branding on top?

Let us know.

Are you aiming for something like this?
Yes that's what I was aiming for for the whole site.

Or do you want to remove the site logo and branding on top?
But for only this page, in addition I will want to remove the logo and the branding.