[Resolved] How change design on mobile menu?

[Anonymous]

Hello,

I want to change design mo mobile menu and would like to do something simular to the mobile menu on the URL below, meaning adding a separation space between header and first menu item, to place an arrow to the right, a white separation line between them and adding Follow us with social media icons, how I can achive this?

Thanks!

Sara

[Ying]

Hi Sara,

It will require custom CSS.

Can you show us your site? Are you using off-canvas menu for mobile now?

[Anonymous]

Hi Ying,

No, right now Off Canvas Panel is Off so, I am not using it.

Ok how I can do this? I placed URL website below

Thank you!

[David]

Hi there,

for the Social Icons or other content below the menu:

1. Create a new Block Element.
2. Set the Hook to: after_primary_menu
3. Set the Priority to 50
4. Add your content inside with a Container Block and give it an Advanced > CSS Class of hide-on-desktop

For the other styles – do you plan on adding sub menus ? As the example site has those which is why the arrows are there. Let me know.

In the meantime, this CSS will provide the underlines:

@media(max-width: 768px) {
    .main-navigation.toggled .main-nav>ul>li {
        padding: 0 20px;
    }
    .main-navigation.toggled .main-nav>ul>li>a {
        border-bottom: 1px solid rgba(255,255,255,0.5);
        padding-left: 0;
    }
}

[Anonymous]

Hello David,

Just a few questions:

1) On Block Element Hook what PHP code should I add to it? And on Display Rules I put “Entire Site” correct?

2) How do I add social icons?

3) I did not understand point 4, which content should I add to a Container Block and where should I create this Container Block?

About your questions: No I dont think I will use sub menu at least in mobile, in desktop might use it if all menu options dont fit on menu.

[Ying]

1) On Block Element Hook what PHP code should I add to it? And on Display Rules I put “Entire Site” correct?

No PHP code will be needed. You just need to add social icons to the block element.
The display rule is the entire site.

2) How do I add social icons?

If you have GenerateBlocks plugin installed, you can use the buttons block, it has built-in social icons. If you require specific social icons, you can get the icon’s SVG code and enter it in the Buttons block’s icon field.

3) I did not understand point 4, which content should I add to a Container Block and where should I create this Container Block?

Container block is a block of GenerateBlocks plugin. In the block element, add a Container block with the additional CSS class: hide-on-desktop, detailed how to:
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Then add the Buttons block (social icons) to the Container block.

[Anonymous]

Hi Ying,

I think I understood most of it and what is a Container Block the thing I still dont understand is where I create this Container Block? Do I create this on Hook Element, on a Page or where should I created so, I placed icons inside of it and css class to it?

Thanks,

Sara

[David]

In Appearance > Elements, add new Block Element.
You will be presented with the editor that looks like the normal post block editor.
Simply add New Block to the page, and select a Container Block.
Then inside that Container add new block and select a Buttons block.

[Anonymous]

Hello David and Ying,

Sorry for the late reply,

Just a few questions:

1) I got it now thanks but, where I am supposed to publish it so, it shows only on mobile menu at the bottom after all menu elements like on site mentioned below?

2) Since I am placing in the social icons on the middle maybe is just better to do the same for the mobile menu, how I can make the following changes on menu:
a) Remove 10px padding from top and bottom since I will ad 2 more menu items and social icons
b) Center menu items
c) Add white separation border on top

Thanks for your time,

Sara

[Fernando]

Hi Sara,

Let’s discuss #1 first.

Add your content inside with a Container Block and give it an Advanced > CSS Class of hide-on-desktop

Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

[Anonymous]

Hi Fernando,

Sorry for the late reply, I been thinking and I am actually leave mobile menu as it is I just would like to only the following changes to it:

1) I would like to center menu items

2) I would like to put an extra separation line on top of first menu item (same as others)

3) I would like to remove some padding space between separation lines and menu items like 10px maybe.

Please let me know how to do this so, I can mark as resolved topic.

Thanks,

Sara

[Ying]

For #1 and #2, try adding this CSS:

@media(max-width: 768px) { 
.main-navigation.toggled .main-nav>ul>li>a {
    text-align: center;
}

.main-navigation.toggled .main-nav>ul>li:first-child>a {
    border-top: 1px solid rgba(255,255,255,0.5);
}
}

For #3, you should be able to reduce it at customizer > layout > primary navigation >menu item height, make sure you click the mobile icon so the change only applies to mobile.

[Anonymous]

Hello Ying,

Thank you very much that solution worked perfectly 🙂

Have a great day!

[Author]

Posts