Side Panel

Side Panel

Customize Menu Header link to Side Panel settings

Navigate to Appearance > Customize > Header > Side Panel to add a side panel to your website. You can use the Side Panel as a sidebar or an extension to your site navigation menu.

Opening Button Position

The open icon can be set to appear within your site navigation menu, or as a tab attached to the side of your website. Here the available options:

In front of title

Opening button position is setup to "In front of title".

Available styling settings:

  • Opening Button: Color: Adjust the color of the icon.
  • Opening Button: Hover Color: Color of the icon on hover.
  • Opening Button Icon: Choose an icon, in this example, we use the hamburger menu icon.
Cutomize area showing button color set to blue, hover to red and the button icon to a hamburger menu.
  • Breakpoints: Choose the media query where you want to hide the side panel.
Breakpoints dropdown menu.
  • Display Close Button: It will show the Close button on the side panel. For this example, we are using the Close button Text “Close Panel”.
Close button text and display close button options.
  • Displace: It will move the content, so the side panel does not overlap that information.
Sisplace option in customize settings.
  • Add Overlay: The content area will show an overlay color over the site content. The intention is to make the sidebar more prominent.
Add overlay option.
  • Panel Position: You can choose to display the panel on the left or right side of the site.
Side Panel buttons Right / Left
Overlay showing the option to adjust the color to purple.
You can adjust the overlay color on the setting Overlay Color
  • Panel Width (px).
Screenshot showing how to setup the width in pixels of the side panel
  • Padding (px): Setup the padding in pixels of the area inside the Side Panel.
Screenshot on how the padding is represented in the side panel widget area.
  • Background Color: Adjust the background color of the side panel.
  • Close Button Background: Adjust the ground color of the close button.
  • Close Button Background: Hover: Background Close button on hover.
  • Close Button Color: Color of the font used for the Close button.
  • Close Button Color: Hover: Close button color on hover.
Screnshot Sid panel background color and close button background color
  • Text Color: Text color inside the widgets.
  • Headings Color: Color of the headings of each widget.
  • Links Color: Color used to the links applies to menus as well.
  • Links Color: Hover: Color of the link on hover.
  • Widgets List Borders Color.
Different color settings for the side panel.

Inside the main menu

Open Button position Inside the main menu.

Available styling settings: Same “Infront of title” but with an additional setting “Opening Buton Text” and “Text Position”.

Opening button text screenshot to that setting.
The image shows a nice background with the sea, the top navigation menu and the "open" text next to the hamburger menu icon.

Beside the panel

Opening button Position beside the panel setting.

Available styling settings: This one shares similar settings to “In front of title”, but there are other settings like:

Panel Button Position that you can use to move the button in three different areas:

  • Top of panel.
  • Middle panel.
  • Bottom panel.
A screenshot of the panel button position. We can locate the button on the top, middle or bottom of the panel.
  • Icon Size
A screenshot showing the icon size that we can use inside the side panel button.
  • Button: Background Color
A screenshot of the option to setup the background color of the button on the side panel.
  • Button: Color
  • Button: Border Color
A screenshot showing the option "Button: Border color", it shows the border of the side panel button in light gray.
  • Custom Opening Button
  • Opening Button: Color
Screenshot, opening button, we have choosen a minus symbol.

Widgets

You can include widgest on the sidebar.

A lady smiling in the background, the setting shwos how we can adjus the styling of the side panel from the customize area.

Navigate to Appearance > Widgets to add content to your side panel:

How to drag and drop widgets to the Side Panel sidebar
Close Menu