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

Yasin Shaik11
Tera Contributor

@jaheerhattiwale 

 

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. 🙂 

 

 

1 ACCEPTED SOLUTION

@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

jaheerhattiwale_0-1673538808866.png

 

2. Create a new UI Script

jaheerhattiwale_1-1673538830110.png

 

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

jaheerhattiwale_2-1673538889866.png

 

 

4. Add a JSS include to the theme

jaheerhattiwale_3-1673538925424.png

 

 

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

10 REPLIES 10

jaheerhattiwale
Mega Sage
Mega Sage

@Yasin Shaik11 

Go to "Service Portal > Portal"

Open your portal record

Open main menu record

jaheerhattiwale_0-1673521096934.png

 

Scroll down to the related lists

In menu items related list add a new one

jaheerhattiwale_1-1673521151273.png

 

Create new one like below

jaheerhattiwale_2-1673521190761.png

 

Once menu item is created, open the created menu item and add the more menu items in it in related list

jaheerhattiwale_3-1673521246858.png

 

 

Result:

jaheerhattiwale_4-1673521266920.png

 

 

Please mark as correct answer if this solves your issue.

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

Hi Jaheer,

Thanks for your reply,

Whenever user hover it , has to show the items which are present in the Hamburg  menu. How we can achieve this one ? Please assist me on this. 

 

 

@Yasin Shaik11 Currently through configuration use has to click on it to see whats there inside. If we need it on hover then we need to modify the script used for showing header.

It will un necessarily increase the difficulties.

 

I would suggest to educate end user to click on it to see the options.

 

BTW you can add the tooltip like below in the hint field of menu item table

jaheerhattiwale_0-1673522515321.png

 

The field is not available on form, so you can add on the list layout.

 

 

Please mark as correct answer if this solves your issue.

 

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

Hi Jaheer,

My client is strongly looking for the hover option only. could you please suggest me where to do changes in the script.