Customizing Menu Icons - Offcanvas

Hi Sarathy,

With regards to using custom icons, here is a video you may refer to: https://www.youtube.com/watch?v=wdzFximLiQs

With regards to the color of the “Menu” text, this a WordPress Block. One approach you can do to have an easily editable Heading is to remove the Navigation Menu Block title and add a GB Headline.

See: https://share.getcloudapp.com/jkum5GKk

Also see: https://share.getcloudapp.com/xQuzr2gq

With regards to centering this, we can modify the code provided in an earlier ticket to something like this:

.slideout-navigation .inside-navigation.grid-container.grid-parent {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slideout-navigation .inside-navigation.grid-container.grid-parent .widget_nav_menu .widget-title {
    text-align:center;
    color:white;
}

In this code, I also added a code to modify the color of the text “Menu” in case you prefer it this way.

As for the spacing of the menu items, here is a code you can try:

.slideout-navigation .inside-navigation.grid-container.grid-parent .widget_nav_menu .menu-main-menu-container ul > * {
    padding: 10px 0;
}

Kindly let us know how it goes! Hope this helps! :)

You are awesome. Thanks a lot @Fernando

@Fernando Yes, I used that awesome video and created.

I wanted to replace the RSS icon image on light weight social icon and replace it with a pdf icon in the light weight social plugin displayed in the offcanvas panel.

You’re welcome Sarathy!

As for customizing/replacing an icon in LSI, this wouldn’t be possible. Kindly refer to this thread: https://generatepress.com/forums/topic/lightweight-social-icons-12/#post-1563413

As mentioned by my colleague, it would be better to use GB to create your icons since you can add any custom icon you prefer(in your case, the pdf icon). :)

See: https://share.getcloudapp.com/wbuYG4g6

Hope this clarifies! :)

Thanks for the Reply Fernando. I am using GB's Light Weight social Icon plugins only. Only thing is i do not have option to upload my own icon. Instead, I thought why not replace "RSS" icon with "PDF" icon . You can see i am already linking to pdf on https://nationalroofingsupply.ca on Offpanel canvas menu for the "RSS ICON". Only thing is i need to replace that icon code with PDF icon code. I dont know where to edit in the plugin folder.

Thank you

It’s not possible to add Lightweight Social Icons. You’ll need to use a different plugin or If you wish to modify the code, you can try modifying fontello.svg.

You can also use GB Buttons though for the Off Canvas Panel instead of using Light Weight Social Icons. This is what we would recommend now since in essence Light Weight Social Icons is an outdated predecessor of GB.

Hope this helps! :)