[Resolved] add blocks to the widget area

[Ying]

It’s very difficult to write CSS without seeing the live site since everyone has different settings for header/navigation.

If you can set up a staging site we would be more than happy to help.

[Loïc]

Hello,

Here is the url of the staging server. AS you can see I cannot find how to set the element with the three social icons at the extreme right of the main menu (in red). There are two icons I need to remove on that bar ….

[David]

Hi there,

before we review the options, one question – what will happen to the Red Bar on Mobile ? As currently it doesn’t fit on mobile.

[Loïc]

I have not thought about mobile … – what do you suggest ?

[Loïc]

Can you please send me these options you suggested ???

[David]

Ok so lets try this:

1. Remove the widgets from the top bar – this will remove the Top bar.
2. Add your menu ( from the Red top bar ) to the Secondary Navigation location.
3. Set the Secondary Nav location to Above header and set your colors etc.
4. Now for your Block Element set its Hook to inside_secondary_navigation

Once its there i can look at the CSS required to position them.

[Loïc]

OK – I also wanted to put search in the right sidebar but it did not work …

[Loïc]

I did as you suggested but it broke the conditional menu that was in the right side bar …

[Loïc]

Hello,

I was thinking maybe I have too many menus for the theme and only one of this menu is dynamic so i can turn them into elements to display ?

First menu is category menu – fixed links to categories (grey)

I have a conditional menu that shows up the menu corresponding to the category (10 sub menus) in the left sidebar (black)

Last menu is a thema menu – fixed links to pages (red)

[Loïc]

Hello,

Can you please follow up on that ?

[David]

Aah… sorry i didn’t spot the secondary menu in the sidbar.

In that case it may be best to put the site back how you had it for your Primary and Secondary ( sidebar ) Nav.

Then remove the widgets from the Top Bar.

And now create your won Top Bar in a Block Element, set to hook: before_header
For the block editing:

1. Add a Container Block. Set the Background color (Red), in Advanced > Additional CSS Class(es) add: custom-top-bar– this is your new Top bar.
2. Inside the Container use a Grid Block 2 column – 1 column for the menus. 1 column for the social shares.3
3. Create the menus and the social shares using Buttons Blocks.

[Loïc]

Thanks – it seems to work but I need help to round the social icons and center the left menu. Also I cannot turn this into a real menu with sub items ??. I dont understand why it is not possible to add any menu as a block … Is it a limitation of the theme?
. Thanks

[David]

Aah… didn’t realise you needed sub menus… i thought these were Top Bar links ?

The Navigation Block is a core WordPress block currently under devlopment outside of wp.com , it won’t be implemented until WP 5.9 ( maybe ).

Which menus require sub menus ? Does the top grey bar menu require them too ?

[Loïc]

Hello. Happy to hear that more blocks are coming. No the grey does not so I will exchange the grey menu for elements and keep the red menu as primary menu. However, there is only room on that menu. Please let me know then how to add that social element container in the menu …

[David]

So you can use the menu_bar_items Hook to add the social icons to your Primary ( Red ) Navigation.

[Author]

Posts