![Customize Menu Header link to Side Panel settings - Photocrati Customize Menu Header link to Side Panel settings](https://members.photocrati.com/wp-content/uploads/2020/10/image-3.png)
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". - Photocrati Opening button position is setup to "In front of title".](https://members.photocrati.com/wp-content/uploads/2020/06/sidebar_options_1.png)
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. - Photocrati Cutomize area showing button color set to blue, hover to red and the button icon to a hamburger menu.](https://members.photocrati.com/wp-content/uploads/2020/10/image-6.png)
- Breakpoints: Choose the media query where you want to hide the side panel.
![Breakpoints dropdown menu. - Photocrati Breakpoints dropdown menu.](https://members.photocrati.com/wp-content/uploads/2020/10/image-7.png)
- 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. - Photocrati Close button text and display close button options.](https://members.photocrati.com/wp-content/uploads/2020/10/image-9.png)
- Displace: It will move the content, so the side panel does not overlap that information.
![Sisplace option in customize settings. - Photocrati Sisplace option in customize settings.](https://members.photocrati.com/wp-content/uploads/2020/10/image-10.png)
- 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. - Photocrati Add overlay option.](https://members.photocrati.com/wp-content/uploads/2020/10/image-11.png)
- Panel Position: You can choose to display the panel on the left or right side of the site.
![Side Panel buttons Right / Left - Photocrati Side Panel buttons Right / Left](https://members.photocrati.com/wp-content/uploads/2020/10/image-12.png)
![Overlay showing the option to adjust the color to purple. - Photocrati Overlay showing the option to adjust the color to purple.](https://members.photocrati.com/wp-content/uploads/2020/10/image-14.png)
- Panel Width (px).
![Screenshot showing how to setup the width in pixels of the side panel - Photocrati Screenshot showing how to setup the width in pixels of the side panel](https://members.photocrati.com/wp-content/uploads/2020/10/image-13.png)
- 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. - Photocrati Screenshot on how the padding is represented in the side panel widget area.](https://members.photocrati.com/wp-content/uploads/2020/10/image-15.png)
- 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 - Photocrati Screnshot Sid panel background color and close button background color](https://members.photocrati.com/wp-content/uploads/2020/10/image-18.png)
- 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. - Photocrati Different color settings for the side panel.](https://members.photocrati.com/wp-content/uploads/2020/10/image-19.png)
Inside the main menu
![Open Button position Inside the main menu. - Photocrati Open Button position Inside the main menu.](https://members.photocrati.com/wp-content/uploads/2020/10/image.png)
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. - Photocrati Opening button text screenshot to that setting.](https://members.photocrati.com/wp-content/uploads/2020/10/image-5.png)
![The image shows a nice background with the sea, the top navigation menu and the "open" text next to the hamburger menu icon. - Photocrati The image shows a nice background with the sea, the top navigation menu and the "open" text next to the hamburger menu icon.](https://members.photocrati.com/wp-content/uploads/2020/10/photocrati_open_menu.png)
Beside the panel
![Opening button Position beside the panel setting. - Photocrati Opening button Position beside the panel setting.](https://members.photocrati.com/wp-content/uploads/2020/06/sidebar_options_2.png)
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. - Photocrati A screenshot of the panel button position. We can locate the button on the top, middle or bottom of the panel.](https://members.photocrati.com/wp-content/uploads/2020/10/image-28.png)
- Icon Size
![A screenshot showing the icon size that we can use inside the side panel button. - Photocrati A screenshot showing the icon size that we can use inside the side panel button.](https://members.photocrati.com/wp-content/uploads/2020/10/image-20.png)
- Button: Background Color
![A screenshot of the option to setup the background color of the button on the side panel. - Photocrati A screenshot of the option to setup the background color of the button on the side panel.](https://members.photocrati.com/wp-content/uploads/2020/10/image-21.png)
- 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. - Photocrati A screenshot showing the option "Button: Border color", it shows the border of the side panel button in light gray.](https://members.photocrati.com/wp-content/uploads/2020/10/image-23.png)
- Custom Opening Button
- Opening Button: Color
![Screenshot, opening button, we have choosen a minus symbol. - Photocrati Screenshot, opening button, we have choosen a minus symbol.](https://members.photocrati.com/wp-content/uploads/2020/10/image-27.png)
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. - Photocrati A lady smiling in the background, the setting shwos how we can adjus the styling of the side panel from the customize area.](https://www.imagely.com/wp-content/uploads/2019/08/ImagelyTheme_Header_SidePanel_open.jpg)
Navigate to Appearance > Widgets to add content to your side panel:
![How to drag and drop widgets to the Side Panel sidebar - Photocrati How to drag and drop widgets to the Side Panel sidebar](https://www.imagely.com/wp-content/uploads/2019/08/ImagelyTheme_Header_SidePanel_widgets.jpg)