Website Theme Customizer

  1. Home
  2. Support
  3. Website Theme Customizer
  4. Header – Choose the Header Style and Design
  5. Customize the Website Main Menu Appearance

Customize the Website Main Menu Appearance

The menu section will provide you with all the configurations you need for improving the menu aesthetics as well as functionality. We will go through each of the available settings to better understand it. Let’s get started!

Navigate to your website admin, browse to Appearance > Customize > Header > Menu.

Enabling a Custom Menu Layout

If you want to go for a custom menu layout, you need to have the menu layout ready first. If you do, it’s simply a matter of uploading it.

Just click over the drop-down under the “Select a Layout” in the Menu panel and choose your custom layout.

Main Menu

Enable the Top Level Dropdown Menu Icon

A drop-down menu uses a little icon as an indicator for visitors to know of it as a drop-down. So that users can click over it to go through the drop-down items.

You can enable a downward facing small icon for a top-level dropdown of the main menu. Just click the checkbox next to the “Top Level Dropdown Icon” to activate it. You can uncheck it to disable it as well.

Enable the Second+ Level Dropdown Menu Icon

A second level drop-down is considered to be a drop-down under a drop-down. If you want to enable the icon for the second (and rest of them) level drop-down.

Simply click over the checkbox next to the “Second+ Level Dropdown Icon” to activate it.

Applying a Link Effect over Menu Links

You can apply interesting effects to your menu links. You will be able to see these link effects as you hover over the menu items. Following are the provided links effect:

 

  • Underline From Left
    • A 2px border is animated from the left to right.
  • Underline Up
    • A border of 2px is animated from bottom up.
  • Underline Down
    • Contrary to the one above, the border is animated from the top to down.
  • Brackets
    • The opening bracket [ is added to the left and closing bracket ] to the right of the menu.
  • Overline & Fixed Underline
    • A fixed underline is there under each of the menu links.
    • When you hover over the menu links, the fixed underline becomes thinner and an animated border is added from bottom up.
  • Circular Reveal
    • A double-bordered circle animates (zooms in) right at the center of the menu link on hover.
  • Tripple Dot Under
    • Three dots in parallel to each other (with padding) are added to the menu items on hover.
  • X-Marks the Spot
    • A fixed top and bottom border are added to the menu links.
    • On hover, these borders are animated in a rotating fashion to make a cross.
  • Underline & Overline
    • A top border (overline) and bottom border (underline) is added with animation over hover.
  • Backlighting
    • A shadow box over the menu links is added on hover.

To choose any of these effects, just click over the drop-down under the Links Effect menu in the Menu panel to choose the desired effect.

Change the Color for the Links Effect

You can apply the desired color for use in all of the links effect.

Just click over the drop-down under the “Links Effect: Color” label in the Menu panel to change the link effects color.

Main Menu Styling

 

Set the Link Color

You can set the color for the links of the main menu.

Simply click over the “Select Color” button under the “Link Color” label in the Menu panel to set the link color.

Set the Hover for Link Color

If you want to change the (main menu) links color upon mouse-over (hover), you can easily do so.

Just click over the “Select Color” button under the “Link Color: Hover” label in the Menu panel to set the hover color for the link.

Set the Link Color of Current Menu Item

The Current Menu Item refers to the current page you’re viewing. You can change the color for the current link page in the menu.

Simply click over the “Select Color” button under the “Link Color: Current Menu Item” label in the Menu panel to set the link color for the current menu item.

Set the Background for Links

If you want to add a background color to the main menu block, you have this control to add it as well.

Just click over the “Select Color” button under the “Link Background” label in the Menu panel to set the link background.

Set the Hover for the Background of Link

You can add background color on hover of a menu item (link), only to highlight the background of the respective menu item individually.

Simply click over the “Select Color” button under the “Link Background: Hover” label in the Menu panel to set the hover for link background.

Set the Link Background for Current Menu Item

Just the way you can set the link color for the current menu item. You can also set the background for the current menu item. If you are viewing a “Page A” for example and have Page A link in the main menu as well. Such a menu link background would highlight with the background color of your choice.

Simply click over the “Select Color” button under the “Link Background: Current Menu Item” label in the Menu panel to set the link background for the current menu item.

Functions Menu Styling

The functions menu is usually located at the top right next to the social icons in the header.

Set the Link Color for the Functions Menu

You can change the menu links color, just by browsing the “Select Color” button under the “Link Color” label in the Menu panel to choose the desired color.

Set the Hover for the Link Color of the Functions Menu

You can change the colors of the menu links upon mouse-over; it’s easy to change the hover color for links for the functions menu as well.

Click over the “Select Color” button under the “Link Color: Hover” label in Menu panel to choose your desired hover color.

Dropdowns Styling

You can add styles to the site dropdown menus, following are the configuration options provided to you for the drop-down styling.

Change the Width of the Dropdowns (in Pixels)

If you want to change the width of the dropdown in pixels, you can use this configuration to do so. You might want to increase the width of the dropdowns to provide a better usability experience. Because your design may have relatively larger menu links and increasing dropdown width would align it with the rest of the website design.

Simply use the slider under the “Width (px)” label in Menu panel to choose the desired width.

Change the Background Color of the Dropdowns

You can change the background color for all the dropdowns. The background that is used for extended menus, one that expands with other menu items as you hover over it.

Simply click over the “Select Color” button under the “Background Color” label in Menu panel to choose the desired background.

Change the Borders Color of the Dropdowns

The borders of the dropdowns are customizable as well. You can choose any color for the borders that suits your design.

Simply click over the “Select Color” button under the “Borders Color” label in Menu panel to choose the desired border color. 

Change the Link Color of the Dropdowns

The link color for the dropdowns can be configured as well. So all the menu items (link text) appearing under the dropdown will be changed on updating link color using this configuration.

Simply click over the “Select Color” button under the “Link Color” label in Menu panel to choose the desired link color.

Change the Link Color on Hover over Dropdowns

If you want to change the link color (text color) of dropdowns whenever anyone mouse-over the link, you can easily do so too.

Simply click over the “Select Color” button under the “Link Color: Hover” label in Menu panel to choose the desired link color.

Change the Link Background on Hover over Dropdowns

If you want to change the background of a link on hover (mouseover) over dropdowns, you can use this configuration option to do so.

Simply click over the “Select Color” button under the “Link Background: Hover” label in Menu panel to choose the desired background color on hover.

Change the Link Color for the Current Menu Item of Dropdowns 

You can change the current menu item link color under dropdown. Basically, it is to change the link color for the current page, if available under the menu items of a dropdown.

Simply click over the “Select Color” button under the “Link Color: Current Menu Item” label in Menu panel to choose the desired link color for the current menu item. 

Change the Link Background for the Current Menu Item of Dropdowns

Just as we changed the link color for the current menu item, we can change the link background for the current menu items of dropdowns in a similar fashion.

Simply click over the “Select Color” button under the “Link Background: Current Menu Item” label in Menu panel to choose the desired background color for current menu link.

Dropdowns Categories Posts

Change the Background for the Category Title

You can change the background for the category title as well. You can click over the “Select Color” button next to the “Category Title: Background” label to change the background for the category title.

Change the Category Title Color

Every category has a title color; you can use this setting to update that title color. Just click over the “Select Color” button under the “Category Title: Color” label in Menu panel to change the title color for the category.

Change the Posts Links Color

Every post link has a color and you can change it to suit your needs. Simply click over the “Select Color” button next to “Post Links: Color” label in Menu Panel to change the post links color.

Change the Posts Links Color on Hover

If you want to change the post links color on hover (mouseover), you can do so here. Only click over the “Select Color” button next to the “Post Links Hover: Color” label in Menu panel to change the hover color for posts link.

Change the Posts Date Color

The posts date color can be changed using this configuration. You can change it only by clicking over the “Select Color” button next to the “Posts Date: Color” label in Menu panel to change the posts date color.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?