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

[Yasin Shaik11]

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

[jaheerhattiwale]

@Yasin Shaik11 Let me come back here with procedure

[Yasin Shaik11]

@jaheerhattiwale  Awaiting for your valuable reply 

[jaheerhattiwale · 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

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. 

[Yasin Shaik11]

it's working fine. Thanks a lot jaheer @jaheerhattiwale 

[Yasin Shaik11]

@jaheerhattiwale 

Hi Jaheer,

It is working fine for OOB sp portal and coming to our custom portal not working and I was change the code  accordingly like instead of sp--> i mentioned our portal name. apart from this  Do we need to change other things. Please let me know.