Header – NooTheme https://nootheme.com NooTheme Wed, 11 Nov 2015 06:56:27 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.1 https://nootheme.com/wp-content/uploads/2018/05/favicon.png Header – NooTheme https://nootheme.com 32 32 Mega Menu https://nootheme.com/documents/mega-menu-2/ Sun, 01 Nov 2015 12:38:57 +0000 http://nootheme.com/?post_type=noo_document&p=22819
Carle equips you with a kind of menu called Mega menu whose sample is placed on Shop page of our demo site. Basically, it has some typical features:

 

• The first one, a noticeable feature is that Mega menu allows you to organize sub-menus according to columns. Meanwhile, sub-menus are usually arranged in conformity with hierarchy.
• The structure of a mega menu contains Mega menu heading, sub-pages and widget area.
• Mega menu helps icons to be shown next to pages and sub-pages on the Navigation bar

page297

Create A Mega Menu

In order that you can better perceive how to build a Mega menu, we will opt Shop page in which Mega menu is created. Please follow these steps:

 

Step 1: Navigate to Appearance > Menus > do the same steps mentioned in Set up Menu to obtain structure of the mega menu on Shop page as in the image
pagea33

 

Step 2: Click the triangle icon on the right of Shop pages item then it will expand into many options like:Navigation label: name of the parent page (Shop page)Icon: you can select an icon of the page and change size, color and position of the icon here. Click the arrow icon to opt an icon and click the stick icon to make alternations to the icon.

Enable Mega menu: ticking this box allows display of megamenu

Mega menu column: This option has a drop-down list of different numbers of columns shown in Mega menu area. The number varies from 2 to 6. On our demo site, this number is 4.

Hide Mega menu heading: Check this box if you want to hide Mega menu heading. In our demo, Shop pages item is considered to be a Mega Menu heading. When you choose option of hiding mega menu heading, Shop pages title will automatically disappear on Mega menu area.

pagea34

 

Step 3: Regarding Shop menu item, it is a Custom link. Therefore, you also have common options like URL, Navigation, Title Atribute and Icon. Besides, you will have an extra option named Mega Menu Widget Area which contains a drop-down list. Thus, you will have to opt Select Widget area whereas the remaining options in this drop-down list will make Shop pages item become a widget area.
pagea36

 

Step 4: As for sub-pages like Wishlist, Cart, My account and Checkout, you only need to modify three options which are Navigation Label, Title Attribute and Icon.
pagea35

 

Step 5: Widget 1, 2 and 3 constitute the widget area of Mega menu. Therefore, before making any changes to options included in these three items, please assure that you created sidebars and widgets corresponding to them:

  • We have three sidebars: Menu One, Menu Two and Menu Three.

Learn more about creating sidebars:
http://nootheme.com/documents/sidebar-widget/

  • Next, navigate to Appearance > widgets > drag WooCommerce Products widget to Menu One, Menu Two and Menu Three. Click the triangle icon then you will have further options like Title, number of products to show, Show (All products, Featured products, On-sale products), Order by(Date, Price, Random and Sales), Order (Descending or Ascending).

Learn more about adding widgets to a sidebar:
http://nootheme.com/documents/sidebar-widget/

page298


 

Similar to Shop menu item, Widget 1, 2 and 3 are Custom links; therefore, you will also have options like URL, Navigation label, Title Attribute, Icon and Mega Menu Widget Area. In the drop-down list of Mega Menu Widget Area, opt Menu One, Menu Two and Menu Three to Widget 1, Widget 2 and Widget 3 respectively.
pagea38

Step 6: Click Save Menu button

]]> Header Types https://nootheme.com/documents/header-types/ Fri, 16 Oct 2015 08:57:17 +0000 http://nootheme.com/?post_type=noo_document&p=20691 Carle equips you with 6 different kinds of Header. It is up to your preference to pick a suitable header with the site. Let`s discover characteristic of each type:

1. Header 1

header3

2. Header 2


header4

This kind of Header has two special features:

• Allow you to search categories you created in WooCommerce Products > Categories

• You will see a section called Categories on the right of the navigation bar. This section contains a list of WooCommerce pages that are My account, Checkout, Cart and Shop page

3. Header 3

header5

4. Header 4

header6

5. Header 5

header7

When you click the icon of search on the right side of the navigation bar, you will be directed to a separate search area like this:

header9
Click X icon to return to the site.

6. Header 6

header8

Similar to search in Header 5, as you press the icon of search, you will see the same thing happen in Header 5

]]> Set up Menu https://nootheme.com/documents/set-up-menu-3/ Fri, 16 Oct 2015 05:00:41 +0000 http://nootheme.com/?post_type=noo_document&p=20657
In order that pages can be displayed in the menu that is located in header area of the site, you have to carry out these steps:
Step 1: Navigate to Appearance–> Menu section of your admin sidebar.
Step 2: Click the Create A New Menu link to make a new menu. Enter the name then click the Create Menu
Step 3: To add menu item, select one of your created pages on the left hand side and click the Add To Menu button. You can also add different posts from the left side.
Step 4: To add a custom menu item, enter a custom name and link into the Links box.
Step 5: Manage your menus by using the drag and drop functionality. To create a dropdown menu in Menu Structure, simply drag a menu item on the left side to the area on the right side.
Step 6: After setting up your menu, scroll down to the bottom of the page to assign the menu on the Theme Location box.
Step 7: Once It’s all done, make sure you click  Save Menu.
header

 

Now returning to the site, you will see the menu shown on the header like this:
header1

 

Yet when you see the header on our demo site:
header2

 

You can wonder yourself “why is the header of my site different from that of your site?”.To achieve such design, refer to this link Header Customizer

 

]]> An Introduction To Header https://nootheme.com/documents/an-introduction-to-header-2/ Fri, 16 Oct 2015 04:10:21 +0000 http://nootheme.com/?post_type=noo_document&p=20652 Perhaps Header is the first place visitors look at when they go to your site. The first impression is always important; therefore, if the Header can convey your message to users, that is very great! The simple message given to them can be an understandable and clear menu or an amazing and eye-catching design of the header or diversified header styles of your site also make the most choosy customers feel satisfied.
In the most essential respect, a header should contain three parts which are menu area, logo and top bar:

page358

Here is structure of sections in Header, which will help you to acquire essential knowledge of building a Header. In terms of an striking and personal Header, I suppose that it depends on your creativity:))

  • Set up Menu
  • Header Styles

 

]]>