Need to add the Hamberg menu on the portal header next to the logo

Yasin Shaik11 · ‎01-12-2023

Hi jaheer,

Hope your doing well.!

On the portal header next to the logo need to add Hamburg menu(PFA) whenever user hover it has to show some options like for example Catalog , Knowledge , Request something etc.

Could you please help me how to do this.and what i need to add in the HTML and CSS code and where .

Thanks in advance. 🙂

jaheerhattiwale · ‎01-12-2023

@Yasin Shaik11 Create the menu first as per the earlier procedure I shared. Then follow below steps.

1. Go to "System UI > UI Scripts" module

2. Create a new UI Script

Script:

$(document).ready(function() {
setTimeout(function() {
$("#sp-nav-bar ul li a").first().mouseover(function() {
$("#sp-nav-bar ul li a").first().trigger('click');
});
}, 1000);
});

3. Open your portal record and open theme

4. Add a JSS include to the theme

5. Add the UI Script created in JSS include

Note:

The script will only work for the first left menu. So keep the Hemberger icon at left only.

Please mark all the answers on this question as correct answer if these solved your issue.

Please mark the answer as correct or helpful based on impact
ServiceNow Community Rising Star, Class of 2023

View solution in original post

jaheerhattiwale · ‎01-15-2023

@Yasin Shaik11 Don't change the code. Add it as is. The same code should work for all portals.

Please mark the answer as correct or helpful based on impact
ServiceNow Community Rising Star, Class of 2023