Your website's menu can be customised to best suit your needs. Below you can find information on the different menu styles, and layout options available to your Sporty site.
This article includes:
Menu Styles
To make changes to your menu, once you are logged in click the edit pencil icon to the bottom right of your menu. Then select Menu Style. This will open the menu utility and from here, you can select which type of menu you would like to display on your website.
Classic Menu
The Classic Menu is the default menu of your site. If you have sub-menu items, a drop down will appear when a menu tab is hovered over to display those lower-level menu items.
1. Once logged in to your website, click the edit pencil icon at the bottom right corner of your menu and select Menu Style. The menu utility will open and you will be able to select Classic Menu. To edit the style of your Classic Menu, click the Style tab and customise your selections.
Classic Menu Style Tab:
Text:
- Font/Size/Style
- Colour: the standard colour of your text
- Hover colour: the colour of the text when your mouse is hovering over it
Background:
- Colour: the standard colour behind the text
- Hover colour: the colour behind the text when your mouse is hovering over it
- Transparency (on both): how visible the colour will display
Border:
- Style
- None/Square corners/Round corners/Underline on hover
- Colour: the standard colour of the border
- Transparency: how visible the border colour will display
- Apply drop shadow: a shadow will appear around the edge of the border when the menu is interacted with
Mega Menu
A Mega Menu is an extension of your site's menu, and will display a large panel of content below a menu item when the user clicks or hovers over that menu item. A mega menu provides a better user interface when you have many sub-menu items, as it reveals all lower-level pages at a glance.
1. Once logged in to your website, click the edit pencil icon at the bottom right corner of your menu and select Menu Style. The menu utility will open and you will be able to select Mega Menu. To edit the style of your Mega Menu, click the Style tab and customise your selections.
Mega Menu Style tab:
These options are applicable to the menu tab itself, not the entire menu strip.
Text:
- Font/Size/Style
- Colour: the standard colour of your text
- Hover colour: the colour of the text when your mouse is hovering over it
Background:
- Colour: the standard colour behind the text
- Hover colour: the colour behind the text when your mouse is hovering over it
- Transparency (on both): how visible the colour will display
Border:
- Style
- None/Square corners/Round corners/Underline on hover
- Colour: the standard colour of the border
- Transparency: how visible the border colour will display
- Apply drop shadow: a shadow will appear around the edge of the border when the menu is interacted with
Hamburger Menu
A Hamburger Menu is an extension of your site's menu, and will display a dropdown panel with your sites content directory when selected. A Hamburger Menu provides a clean user interface with the contents of the menu being stored out of view until selected. Sub-menu items will be revealed at a glance when the mouse hovers over each menu item displayed.
1. Once logged in to your website, click the edit pencil icon at the bottom right corner of your menu and select Menu Style. The menu utility will open and you will be able to select Hamburger Menu. To edit the style of your Hamburger Menu, click the Style tab and customise your selections.
Hamburger Menu Style tab:
Menu Strip:
This section updates the look and feel of the Hamburger Menu icon itself.
- Background colour: the colour of the strip where the menu is located
- Hover colour: the colour that the strip will change too when the mouse is hovering
- Hamburger/text colour: the colour of the icon itself
- Hamburger/text hover colour: the colour of the icon when the mouse is hovering
- Add text: you can add text to display beside the hamburger icon. E.g. Directory/Menu
- Menu text
- Font/Size/Style
- Full width background: enable this if you want the menu stripe to display across the entire width of the page
Menu Dropdown Text:
This section updates the text displayed in the dropdown displayed.
- Font/Size/Style
- Colour: the colour of the text for each tab found within the menu
- Hover colour: the colour the text is highlighted when the mouse is hovering
Menu Dropdown Background:
This section updates the background that your dropdown displays.
- Colour: the colour of the dropdown when the Hamburger Menu is expanded
- Transparency
- Hover colour: the colour of the dropdown when the Hamburger Menu is expanded as the mouse hovers over certain aspects.
- Transparency
- Full width background: enable this if you want the dropdown to display the entire width of the screen.
Border:
This section updates the Hamburger Menu border.
- Style: select from either square or rounded corners, or select underline on hover
- Colour: the colour of the border, or the underline
- Transparency
- Corner radius: if rounded corners are selected, you can decide how round you would like them
- Apply drop shadow: enable this if you would like to see a shadow when hovering over the Hamburger Menu
Menu Layout Features
Menu Style
- Classic/Mega Menu/Hamburger Menu/No Menu
- By selecting No Menu, your menu will no longer be visible to site visitors
Alignment
- Logo: whether you want your logo to be displayed on the right or left of the menu
- Text: choose whether you want the menu text to be displayed to the left, centre, or to the right
Layout Options
- Full Width:
- Lock to top:
- Display above header:
- Top and bottom spacing (px):
Logo
You can add your logo to your menu strip by uploading the image in this section.
Your logo can be interacted with if one of the following options are selected;
- None: your logo is an image only with no interaction available
- Website URL: set a website to take the user to when the logo is clicked
- Page: set a page to take the user to when the logo is clicked
- Document: set a document to take the user to when the logo is clicked
- eNewsletter: set an eNewsletter to display to the user
- Online Form: set an Online Form to take the user to when the logo is clicked
- Email Address: set an email address that when clicked, the user can send an email to
- Phone Number: set a phone number that when the logo is clicked, the user can make a phone call
You can also adjust the height of your logo by selecting either Automatic, or by entering a Custom Height.