Change Size Of Hamburger Menu / Icon / Drawer And Its Associated Close Button / 'X' - Question | JoomShaper
Back to the questions

Change Size Of Hamburger Menu / Icon / Drawer And Its Associated Close Button / 'X'

R

RC

Template 1 year ago

Hello Joomshaper,

I would like to increase the size of the hamburger menu / icon / drawer and its associated close button / 'X'.

How do I do that?

Blessings, Rob

0
Website
https://darkhorseestate.net
8 Answers
Order by
Oldest Newest Votes
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 1 year ago #172006

Hello,

Please follow the documentation https://www.joomshaper.com/documentation/helix-framework/customization-tips#how-to-change-the-color-of-offcanvas-menu-icon-usead-in-header

0
R
RC
Accepted Answer
1 year ago #172394

Hello Atick,

Thank you for the information. I was able to change the size. However, while the 'X' is larger, it is skewed as is shown in the documentation. I do not wish to have it "skewed". aka...the 'X' looks smaller on the left and larger on the right; non-proportional.

What are the settings to keep the 'X' proportional?

Blessings, Rob

0
R
RC
Accepted Answer
1 year ago #172127

Hello Atick,

Thank you for the information. I was able to change the size. However, while the 'X' is larger, it is skewed as is shown in the documentation. I do not wish to have it "skewed". aka...the 'X' looks smaller on the left and larger on the right; non-proportional.

What are the settings to keep the 'X' proportional?

Blessings, Rob

0
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 1 year ago #172413

Hello RC,

Apologize for the issue you're experiencing. Please add the following CSS code to your Template Options -> Custom Code -> Custom CSS

.close-offcanvas .burger-icon span{
    width: 40px;
}

This should resolve the problem. Please let us know if you need any further assistance!

Best regards

0
R
RC
Accepted Answer
1 year ago #172557

Hello Atick,

I tried your coding and it did not make a change. I tried it on the 'template' and I tried it on the actually page but neither changed the 'X' to a proportional / non-skewed 'X'.

Any other thoughts?

Blessings, Rob

0
Pavel
Pavel
Accepted Answer
1 year ago #172457

Hi. Try this

.offcanvas-active .burger-icon > span:nth-child(1) {
    transform: translate(0, 9px) rotate(-45deg);
}
0
R
RC
Accepted Answer
1 year ago #172558

Hello Pavel,

I also tried your coding and it did not make a change. I tried it on the 'template' and I tried it on the actually page but neither changed the 'X' to a proportional / non-skewed 'X'.

Any other thoughts?

Blessings, Rob

0
Pavel
Pavel
Accepted Answer
1 year ago #172713

Hi.

When editing code, any caching and compression must be turned OFF (turn it OFF in template settings) and completely cleaned the Joomla cache and browser cache.

Find the element's code through the browser Dev Tools, select the value as you need, then copy result CSS code from Dev Tools and add to your CSS file

0