Menu and Navigation

Here you can add, remove or change the items shown in the main navigation (or menu) of your website. You will also be able to decide what the menu itself looks like.

Image of nav items on the Pink Pigeon website

This is the logo of your website. Typically situated in the top-left corner. Here you may upload images in .GIF, .SVG or .PNG format, with or without transparency (.JPG works as well, but this format does not support transparency at all). We recommend using .SVG, as this is a screen-resolution independent format which always looks good (say, on retina-style iPads, as well as 4k monitors or really low-resolution mobile phones.)

Image upload size is limited to 2MB, and images above 512kb will be compressed by our system, to ensure your website stays fast for all users.

Image of logo, within Menu and Navigation

Image of Menu Items, within Menu and Navigation, for advanced users

As you can see by the red outline around "Other Services", we have decided to exceed the character-limit in this one instance, as it did not negatively affect the design of the navigation items on our site. Generally we would discourage this, as we have set these limits to ensure that all menu items fit. (For example, if your menu items contained a lot of wide letters, like ‘w', especially in upper-case, the design, or layout of the nav will reach its limits much sooner. That is the limit we have defined using our green character count indicators.)

  • Changing the name (or label) of a navigation item:

Image of a Menu Item, within Menu and Navigation, for advanced users, right text input highlighted

Any text you enter in the highlighted field will be the name / label of your navigation item, independently of where this navigation item leads (in this example it is coincidental that "Who we are" is both the name of the module we are linking to, and the name of the nav item.)

There is a suggested character limit of 12. You can exceed this limit as much as you like, but we cannot guarantee design consistency if exceeded.

If you do not enter any text in this field, the navigation item will not be displayed (and all other navigation items will ‘slot into place').

  • Changing what a nav item links to:

Image of a Menu Item, within Menu and Navigation, for advanced users, left select highlighted

The left field, when selected, will display a list of all Pages and Modules within your website. You may link to any of them from the navigation of your website. The navigation does not allow linking of downloadable files or external URLs, as this goes against best practices for websites (which in turn can result in reductions of your page rank by the likes of Google).

  • Adding / removing / re-ordering nav items

Please view the ‘General Components' - "Adding / Moving / Deleting" section for instructions on how this component works.

Font Colour

Image of nav transparency option

This is the colour of your nav items.

Rollover Colour

Image of nav transparency option

This is the rollover colour of your nav items (when someone hovers their mouse cursor over them on desktop, does not apply on mobile devices).

Image of nav transparency option

You can define a transparent nav, which will sit ‘on top' of whichever your first module is on your website. The ‘opaque' nav will push your module down by the height of the nav.

Persistence

Image of nav Persistence option

The nav can ‘stay on top' at all times, as a floating element at the top of your page. This is useful for saving mobile users having to scroll back up to reach other sections of your website.

Height

Image of nav Height option

The nav can be slim or tall, depending on your preference.

Desktop Style

The reason this item is called ‘Desktop' Style, is that this option only affects how the menu is shown on larger browser window sizes (desktop computers, with the browser in full-screen for example). If you pick the ‘burger' style, the menu will always look the way it would normally just look on mobile devices, like so:

Image of burger nav

Mobile Overlay

Image of nav Mobile Overlay option

You may define three colour options for the mobile overlay (which is the menu shown when users select the menu via the ‘burger' style).

  • Background Colour:

Image of burger nav

  • Font Colour:

Image of burger nav

  • Rollover Colour: This is the colour of a nav item in the mobile overlay, when hovered over with a mouse cursor (only on desktop, does not apply on mobile devices).