How To Configure The Header

  • 22 February 2019
  • 0 replies
  • 729 views

Userlevel 3
Badge +2
'

The inSided platforms has two out of the box headers that you can use. It’s also possible to add your own company header or build your own header from scratch with HTML/CSS/Javascript. 

In this article:

  • How to use and configure the mega menu
  • How to use and configure the default header and navigation bar
  • How to add your company header 
  • How to build your own header with HTML/CSS

How to use and configure the mega menu

Example of the mega menu

Enable and configure the mega menu widget

  1. Sign in to a community account with user role Community Manager or Administrator

  2. Click the purple Customize button

  3. Enable the visibility of the ‘Mega menu’ widget by clicking the eye icon (?️)

  4. Upload your logo 

  5. Enable the visibility for the modules you would like to appear in the navigation

  6. Reorder the entries in the menu

  7. Rename the modules (Optional)

  8. Add and name custom links (Optional). You can decide to have custom links open in a new tab. 

  9. Disable the visibility of the ‘Header’ widget by clicking the eye icon (?️)

  10. Disable the visibility of the ‘Navigation’ widget by clicking the eye icon (?️)

How to change the background color of the mega menu

  1. Sign in to Control as administrator or community manager
  2. Navigate to Customization Navigation 
  3. Adjust the “Background Color”
Change the background color of the mega menu

 

How to use and configure the default header and navigation bar

Example of the default header and navigation bar

Your platform comes with a standard header that can be configured. This header consists of a logo that will link back to your community in the upper left corner and a text link in the upper right corner that can point to any URL of your choice. Most often this is the link to the general website of your company.

Enable and configure the default header

  1. Sign in to Control as administrator or community manager
  2. Navigate to Customization Header
  3. Select header type ‘Default’
  4. Upload your Logo
  5. Configure URL Label and URL Label Mobile
  6. Configure URL
  7. Configure Background color and Link color
  8. Sign in to a community account with user role Community Manager or Administrator
  9. Click the purple Customize button

  10. Enable the visibility of the ‘Header’ widget by clicking the eye icon (?️)

Enable and configure the default header

  1. Sign in to Control as administrator or community manager
  2. Navigate to Customization Navigation
  3. Configure Menu text and icon color 
  4. Configure Login, registration, create topic text and icon color
  5. Configure Background color, Divider top color and Divider bottom color
  6. Sign in to a community account with user role Community Manager or Administrator
  7. Click the purple Customize button

  8. Enable the visibility of the ‘Navigation’ widget by clicking the eye icon (?️)

How to add your company header 

Want to make use of your company official header in the inSided platform? There are two different ways how you can achieve this:

  1. Include your company header via SSI files. This allows you to inject a header.html and a head_include.html file into the inSided platform. See this article for more information on how to add SSI files: 
  2. Recreate your company header with HTML/CSS. See ‘How to build your own header with HTML/CSS’ below for more information 

How to build your own header with HTML/CSS

Want to rebuild your company header or create a custom header specifically for the inSided platform? In the InSided platform you can create your own custom header with HTML/CSS:

  1. Sign in to Control as administrator or community manager
  2. Navigate to Customization Header
  3. Select header type ‘Custom code only’
  4. Add your own code 

Note: We recommend inviting a professional web developer to work with custom code. Insert code at your own risk, and proceed with extreme caution - inSided support won''t be able to assist you with custom code issues. If you want to test your code before publishing we strongly recommend you to use your staging environment first.

'

0 replies

Be the first to reply!

Reply