Layout

The layout section is pretty straightforward. Most options are image pickers, so you can actually have an idea of what you are currently setting based on the options you are picking.

• Navigation Style: You can choose from these different options:
  • Top: The most common type of layout, the logo and navigation menu will be placed at the top of the screen. When selected you will be able to pick the following:
    • Navigation Alignment: Left, Centered, Right, Centered Logo, Centered Inline Logo.
    • Full-Width Header: You can choose if you want your header contents to be full-width.
  • Side: The side navigation will define your site layout with your logo & navigation on the side of your website, and your content besides.
  • Overlay: This type of navigation will use a hamburger icon that when being clicked will display a full page overlay with the navigation menu.
• Layout Type: You can pick between having a full-width layout (default) or a boxed layout.
• Sidebar Position: Pick the default sidebar position. This can be overridden in a post/page basis later on.

Design

On this section, you can basically choose the style for your Header & Navigation.

• Header Skin: You can pick from two options: Light or Dark. This will apply for both logo and navigation.
• Header Background Color: Choose the header background color from your color palette.
• Header Background Image: Upload or select an image from the Media library if you want your header background to use an image. If you upload/select an image you will be able to set some properties like Image Repeat & Position.
• Transparent Header: You can define if you want your header to have a transparent background.
• Overlay Skin: The overlay is shown when the Overlay navigation is selected, or when the search button is triggered (among other situations). You can choose two predefined skins (light/dark) or define your own.
• Header Border: Check this option if you want to add a semi-transparent border at the bottom of the header.
• Header Shadow: Add shadow to the header.

Logo

Picking your own logo is one of the main parts of giving your website a unique look. We have covered all the differen possibilities for you to have more than one logo and different options.

• Text-Based Logo: If you don’t want to use an image and you prefer to use just the name of your site/company as the logo, you can check this option. If checked, you will be able to pick the font and style.
• Custom Logo: Upload/Select an image from the media library to be used as your website logo.
• Custom Logo (Retina): Upload/Select an image from the media library to be used as your website logo in high-resolution devices.
• Custom Logo (Dark Skin): Upload/Select an image from the media library to be used as your website logo when having a dark skin header.
• Custom Logo (Dark Skin, Retina): Upload/Select an image from the media library to be used as your website logo when having a dark skin header in high-resolution devices.
• Hide Logo: This option will hide the logo when the page is loaded, if the header animation is set to “fixed”, then it can appear when the site is scrolled.
• Hide Logo On Mobile Viewports: By clicking this option you will hide the logo on mobile viewports.
• Logo Height: Set the height of your logo, in pixels.
• Custom Logo (Mobile Only): Upload/select a custom logo for mobile viewports, if wanted.
• Custom Logo (Mobile Only, Retina): Upload/select a custom logo for mobile viewports when using a dark skin header, if wanted.
• Custom Logo (Dark Skin, Mobile Only, Retina): Upload/select a custom logo for mobile viewports in high-resolution devices when using a dark skin header, if wanted.
• Logo Height (Mobile Only): Set the mobile logo height, in pixels.
• Logo Padding (Mobile Only): Set the logo padding for mobile viewing.

Animation

This section will let you can create stunning animations and effects for your header/navigation.

• Fixed Position Header: By clicking this option your header will stay fixed to the top of your page when scrolling down.
  • Hide Logo: By clicking this option you can hide your logo when the header is fixed.
  • Shrinking Header: When selected, it will create a shrinking effect when scrolling.
  • Hide Header Until Scroll: By clicking this option the header will be hidden until the page is scrolled.
  • Auto-hide header: By clicking this option the header will hide when the user scrolls down and it will appear once he scrolls up trying to look for the header/navigation menu.

NOTE: Most of the options in this section will only be available for the horizontal and overlay header/navigation layouts.

Navigation Menu

This section will let you set different styles for the navigation menus & submenus.

• Navigation Sub-Menu Content Skin: Pick the navigation submenu content skin. You can pick between dark (default) and light.
• Uppercase Menu Items: By clicking this option you navigation menu items will be uppercased.
• Uppercase Submenu Items: By clicking this option you navigation submenu items will be uppercased.
• Hide Arrows Indication Submenus: By ticking this option the arrows indicating submenus will remain hidden.
• Remove border from Submenus: By ticking this option you will remove the colored border from submenus.
• Hide Mega Menu Separators: By clicking this option you will hide the Mega Menu dividers.

Top Bar

The top bar is a section that can be enabled and will be at the top of the screen. This section is often used to have links for users to sign in, sign up or contact.

• Display Top Bar: This option will enable the Top Bar. If enabled you will have the following options:
  • Top Bar Padding: Select the top bar padding in pixels.
  • Fixed Position Top Bar: By clicking this option you can fix the top bar at the top of the page when scrolling.
  • Top Bar Background Color: Select the background color from the color palette.
  • Top Bar Skin: Pick the Top Bar Skin, available options are light or dark.
  • Top Bar Left Content: Insert content to be displayed in the left part of the top bar. (*)
  • Top Bar Right Content: Insert content to be displayed in the left part of the top bar. (*)

(*): When using WooCommerce you can use the following shortcodes to display links: [login], [logout], [signup] and [my_account].

[login] & [signup] will only display when the user is not logged in. The same logic applies to [logout], it will only display if the user is logged in (as well as [my_account])

There’s also the possibility to add a navigation menu to the top bar. You can create a navigation menu and assign it to the “Top Bar” location.

The top bar, at the top of the screen with a dark background.

The post Header Options appeared first on NiceThemes.

In the Theme Options panel, there’s a special section to set global options for the title bar. These can be later overridden on a page/post basis.

The title bar in a normal page.

The Title Bar Options are the following.

Layout

• Height: You can set a height number and the unit (pixels, percentage, em or pt)
• Minimum Height: The minimum height in pixels.
• Title Horizontal Alignment: You can select to align the contents of the title bar to the left, center or right.
• Title Vertical Alignment: You can choose to vertically align the contents of the title bar at the top, middle or bottom.

Design

• Heading Background Color: Select the background color from the color palette.
• Heading Skin: Select the heading skin. The options are light or dark.
• Title Text Transform: Choose what type of text transformation you would like to apply to the title. Options are: Uppercase, lowercase & capitalize.
• Title Font Weight: Define the font weight for the title in the title bar.
• Heading Font Size: Select the size of the page title.
• Heading Background Image: Upload/select a background image from the media library.

The post Title Bar appeared first on NiceThemes.

Creating a Navigation Menu

Follow these steps and within minutes you’ll have a nice navigation menu and a complete understanding on how it works:

Figure 1: “The Appearance > Menus” screen.

1. Log-in to Your WordPress Dashboard and go to Appearance → Menus
2. Insert a name for your menu, if you have none.
3. Click on “Create Menu” if you don’t have any, or “Save Menu” if you already have one and you want to update it.
4. Once you have your menu, you can add Pages, Categories or Custom Links. To add pages or categories check the box beside and add them by clicking the button. To add custom links fill in the URL and Label fields and click the “Add to Menu” button.
5. Freely organize it by dragging and dropping items from your menu, putting them in the order you want or creating sub-menus (simply giving hierarchy to the structure). Remember to save the changes when you are finished.
6. Assign your menu to a theme location. This is really important, because it will be the location in which the menu you’ve created and edited will be appearing.

Ordering menu items

As mentioned in step number 4, it is really simple to set an order for items. You just need to drag and drop each item in the place you want it to appear.

Setting sub items, and hierarchies

You just need to drag and drop  each item horizontally.

The post Using Navigation Menus appeared first on NiceThemes.

By default, Smart supports multi-level navigation through a menu dropdown. Links inside main menu elements that contain a submenu will display a down-arrow, indicating an additional navigation level. This level will be displayed when hovering the parent item.

Figure 1: Dropdown Menu

Additional navigation levels can be introduced by adding menu items as children inside a submenu. On the public-facing side of the site, the new level is indicated with a side-arrow, and will also be displayed when hovering the parent item.

Figure 2: Multi-level Navigation

If you need more information on how to manage WordPress menus, you can take a look at this article.

Labels

Four different labels can be used to highlight a navigation element. In order to use labels, you need to make sure the “CSS Classes” option is available for menu links. You can toggle this option in Screen Settings > Show advanced menu properties.

Figure 3: Screen Options > Show advanced menu properties

Now you can use the “New”, “Hot”, “Sale” and “Popular” labels by adding their CSS classes to the link’s settings box:

• label-new will display the “New” label.
• label-hot will display the “Hot” label.
• label-sale will display the “Sale” label.
• label-popular will display the “Popular” label.

Figure 4: Navigation Labels

Megamenu/Multi-Column

Smart also supports multi-column submenus, which we’ll also be referring to as “megamenus”.

To have a megamenu inside your navigation area, you need to check the “Megamenu” box inside the settings section of the submenu’s parent element.

Figure 5: Megamenu Checkbox

The number of columns is defined by the amount of direct children elements inside a megamenu. So if your megamenu has two direct children, it will have two columns; three children will generate three columns, and so on. We recommend having no more than four or five columns, so the megamenu columns don’t get too narrow. These direct children will be displayed in the Menu Editor as “Megamenu title”.

Children items of megamenu titles will appear under the titles themselves. Any possible children for these elements will be ignored, as dropdown menus are not supported inside megamenus.

Caption 6: Megamenu

Labels

Labels are also supported for megamenu links.

Figure 7: Labels on megamenu links

Embedded Images

You can embed an image inside a megamenu column. To do that, you just need to set a new megamenu title (the direct child from a main navigation item marked as Megamenu) and add the URL of your image inside the “Image Column (megamenu only)” field.

Figure 8: Embedded image in megamenu

Once you’ve done this, the image will be inserted inside the megamenu using the img tag.

Background Images

Background images for megamenu columns are also supported. To use this feature, you need to make sure both the “CSS Classes” and “Description” options are checked in Screen Settings > Show advanced menu properties.

Figure 9: Screen Options > Show advanced menu properties

To use a background image for a megamenu column, you need to add the background-image class to the megamenu title (the direct child from a main navigation item marked as Megamenu) of the column where you want the image to display. You also need to use the image’s URL as the only value for the “Description” setting.

Figure 10: Background image in megamenu

Tip: If you don’t want to have a label for your item, just enter “ ” in the “Navigation Label” field.

You can also adjust the position of the image inside its container with more precision by adding any of the following classes to background-image:

• background-top-left
• background-top-right
• background-top-center
• background-bottom-left
• background-bottom-right
• background-borrom-center
• background-center

Additionally, the size of the background image can be adjusted using these classes:

• background-cover
• background-contain

The post Navigation & MegaMenu appeared first on NiceThemes.