Adding custom HTML to the header | PenciDesign Support

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Please follow the instruction to add your item to Navigation:

1. Install Code Snippet plugin,

2. Create a new snippet and add the following code:

add_filter( 'wp_nav_menu_items', 'e128_add_custom_menu_link', 10, 2 );
function e128_add_custom_menu_link( $items, $args ) {
    if ( 'main-menu' == $args->theme_location ) {
        $items .= '<button type="button" class="wahout aicon_link" accesskey="z" aria-label="סרגל צד של עוזר נגישות" title="סרגל צד של עוזר נגישות">
                        <img src="https://icwf.co.il/wp-content/uploads/2021/06/accessibility-icon-128px.png" alt="נגישות" class="nolazy aicon_image" style="vertical-align:unset;">
                    </button>';
    }
    return $items;
}

Save & done.

Regards,
PenciDesign.

E128 replied

5 years ago

Customer Reply

Hello,
This is the HTML I want to add.

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

1. Please view this image to understand the location of the Navigation Menus:

As you see in the image above: Primary Menu, Topbar Menu, and Footer are 3 different location show menus on your site.

2. In the Appearance > Menus, you can show the list items like the screenshot above, you can read this article for instructions. If you want to display more HTML elements, please send me an example of your code, I'll help you implement it on your website.

Best Regards,
PenciDesign.

E128 replied

5 years ago

Customer Reply

Hello,

I didn't really understand your explanation.

I see there are 3 menus: Primary Menu, Topbar Menu and Footer.

What is the difference between Primary Menu and Topbar Menu?
How do I add custom HTML to one of them? Where? in which interface?

Thank you

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

You can add custom HTML and Navigation as your example site by go to Appearance > Menus, create a new menu then select display at Primary Menu.

By default, this menu will be hidden on Mobile, please go to Appearance > Customize > Custom CSS, then add the following custom CSS code to display on mobile:

@media only screen and (max-width: 960px) {
    #navigation .menu {
        display: block;
    }
}

Best Regards,
PenciDesign.

E128 started the conversation

5 years ago

Conversation Start

Hello,

I would like to add a custom HTML to my header, next to the hamburger lines. I want to place the accessibility option there, and I would like them to appear on the mobile menu as well.

Example: https://www.japanese-knives.co.il/
Test on mibile.