XF 2.1 Howto-Add Word "Menu" To Hamburger Icon

[ActorMike]

I'm always asking questions, so I thought I would make a contribution. AB testing has shown adding the word MENU next to your Hamburger icon makes a significant improvement in user engagement. Adding a border or background color improves even further. I strongly suggest adding the word MENU at the least for all the newbs visiting the website.

You will probably have to make adjustments for your theme such as the border color and alignment. Feel free to share any improvements on this or mistakes you see.


Add this to your Extra.less to add the menu

a.p-nav-menuTrigger::after {
    content: "menu";
    font-style: normal;
    text-transform: uppercase;
    font-size: 1.3em;
    padding-left: 3px;
    position: relative;
    top: -4px;
}

Add this to your Extra.less to add the menu to add the border.

.p-nav .p-nav-menuTrigger {
    display: none;
    vertical-align: middle;
    align-self: center;
    margin-left: 4px;
    margin-bottom: 4px;
    margin-right: 5px;
    padding: 4px 4px;
    border: 1px solid #f0bafb;
    border-radius: 5px;
}

 

[Alvin63]

That didn't work for me . The border would appear round the hamburger but couldn't get the word "menu" to appear - maybe because my logo fills the space and need to change logo placement?

 

[lucien_lies]

I'm always asking questions, so I thought I would make a contribution. AB testing has shown adding the word MENU next to your Hamburger icon makes a significant improvement in user engagement. Adding a border or background color improves even further. I strongly suggest adding the word MENU at the least for all the newbs visiting the website.

You will probably have to make adjustments for your theme such as the border color and alignment. Feel free to share any improvements on this or mistakes you see.


Add this to your Extra.less to add the menu

a.p-nav-menuTrigger::after {
    content: "menu";
    font-style: normal;
    text-transform: uppercase;
    font-size: 1.3em;
    padding-left: 3px;
    position: relative;
    top: -4px;
}

Add this to your Extra.less to add the menu to add the border.

.p-nav .p-nav-menuTrigger {
    display: none;
    vertical-align: middle;
    align-self: center;
    margin-left: 4px;
    margin-bottom: 4px;
    margin-right: 5px;
    padding: 4px 4px;
    border: 1px solid #f0bafb;
    border-radius: 5px;
}

View attachment 214042
View attachment 214041
View attachment 214040

Hi, how did you manage to put the logo on top of navbar?

 

[abi_dev]

That didn't work for me . The border would appear round the hamburger but couldn't get the word "menu" to appear - maybe because my logo fills the space and need to change logo placement?

Hi,

To avoid lot of things go PAGE_CONTAINER template
find

go to extra.less
paste this css
.p-nav .p-nav-menuTrigger span.button-text {
display: flex;
align-items: CENTER;
}
You can do it also with template modifaction but may be its difficult for you
Thanks
Regard

 

[Alvin63]

Hi,

To avoid lot of things go PAGE_CONTAINER template
find
View attachment 283838
go to extra.less
paste this css
.p-nav .p-nav-menuTrigger span.button-text {
display: flex;
align-items: CENTER;
}
You can do it also with template modifaction but may be its difficult for you
Thanks
Regard

Hi. What exactly do I put in page_container for the menu text please? I've already edited page container to add a "Forum" button to the header.

 

[abi_dev]

Hi,
Can I see your Page container screen shot where you put the text?

 

[Alvin63]

It's exactly the same as your screenshot above, but after "aria hidden true" bit I have the text to add a button to add a "Forum" button to go direct to the forum page from the home page. Russ gave me the code to add the Forum button. Presumably some spacing would be needed to add a "menu" button as well - and different code.

 

[Alvin63]

I could do with "Forum" a bit further to the right and "Menu" next to the hamburger menu.