Change the style of the hamburger menu

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.penci-menuhbg-toggle.builder {
  --pcbd-menuhbg-size: 35px;
}
.penci-menuhbg-toggle.builder .penci-lines:before {
  top: calc(var(--pcbd-menuhbg-size) / 2 - 7px);
}
.penci-menuhbg-toggle.builder .penci-lines:after {
  top: calc((var(--pcbd-menuhbg-size) / 2 - 7px) * -1);
}
.pc-builder-element a.penci-menuhbg-toggle .lines-button:after,
.pc-builder-element a.penci-menuhbg-toggle.builder .penci-lines:before,
.pc-builder-element a.penci-menuhbg-toggle.builder .penci-lines:after {
    border-radius: 10px;
    background-color: #cc0000;
}

You can modify this CSS code to the color/spacing you want to display.

Regards,
PenciDesign.

Juan Sanchez started the conversation

4 years ago

Conversation Start

Hi, how could I change the style of the hamburger menu, I need to achieve a style like this.

https://postimg.cc/jw8FYk3n

Hello, how could I change the style of the hamburger menu, I need to achieve a style like this, where I can change the line thickness, margin, border.

Is there any css or way to do it for theme options?