3.4.2 Main Header
The main header is the top header of the website where all primary menu resides. Users can change the design of the main header of the site with the help of the below-mentioned settings as per need.
Main Header
Main Header holds the primary menu of the site.
- Site Logo - Using this feature users can set the logo in the main header area.
- Favicon - In this setting, the user can set a favicon for the website.
- Width - In this setting, users can select the width of the header. MOTOCOM theme has two options for this narrow and wide.
- Header Style - In this setting, users can select any header style according to their business needs. There are 14 header styles available and we had also attached the screenshots of those headers.
Note - If you are using Listing and Real Estate header style then you need to enable page title for proper header rendering.
- Text Transformation - Using this feature, you can select the mode in which you want to transform the text Capitalize, LowerCase, UpperCase.
- Width - You can also change the width setting of the Main Menu. By selecting one option between narrow and wide.
- Search Icon - This setting is used to enable the search icon in the main header. For this users have to turn“On” the button.
- Search Type - Users can set the search type like gallery, media, posts, pages according to the need of the business.
- Login Button - Using this setting users can enable a login button on the main header. For this users have to turn “On” the button.
- Style - Users can set the style of the login button by selecting any one option between Basic and With Icon.
- Action - Users can set the WP Default login or Custom Login in this setting.
Header Button
Using these settings, users can set the button label, button link, button icon, etc. But these settings will be applicable only for the header buttons.
- Button - To use an additional button on the header user has to turn "On" button.
- Button Label - Users can set the label of the button here.
- Button Link - Users can set the link of the button, where they want to redirect it.
- Button Icon - User can set the icon with button by turning “On” button.
- Icon Type - Users can select the type of the icon by selecting any one option between default and svg
- Icon Select - This setting is used when the user selects Icon Type as Default. Using this setting the user can select the required icon.
- SVG Code - This setting is used when the user selects Icon Type as SVG. In this user has to add the code of the svg icon.
- Icon Position - Using this setting, the user can set the position of the icon as Right or Left.
- Button Color - In the button color setting, there is a color option in which you can choose any color for the background of the button and also you can choose a transparent option.
- Button Text Color - In the button text color setting, there is a color option in which you can choose any color for the text of the button and also you can choose a transparent option.
- Button Hover Color - Using this setting user can set the background of the and the changes can be seen on hover the button. In this setting, the user can choose any color and can also choose the transparent color.
- Button Text Color On Hover - In this setting, the user can set any color for the text button on the hover and can also choose a transparent color.
Custom Header
Using this setting, users can create their own header by creating a page.
- Select Page - For the custom header, users have to create a page with the items that they want to show in the header section. After publishing the page users will be able to see that page in the dropdown of custom header settings.
Header Color Settings
Using this feature user can customize the color settings of the header.
- Background Color - In background color settings, the user can select the background color of the header and can also choose the transparent option.
- Text Color - In-text color, there is a color option in which you can choose any color for the text of the header and also you can choose a transparent option.
- Text Color On Hover In text color hover settings, you can choose any color for the text on hover, and can also choose the transparent color.
Sticky Header
Sticky Header is used to fix the header menu position when you scroll down. In other words, it is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page. It is accessible from anywhere on the website without having to scroll.
- Sticky Header - To apply sticky header, users need to enable the “On “ Button.
- Disable Responsive - If you want to disable the sticky header on responsive then turn “On “ the button.
- Background Color - In this setting, the user can choose the background color of the sticky header and can also choose the transparent option.
- Text Color - In this setting, the user can choose the text color of the sticky header and can also choose the transparent option.
- Text Color On Hover - In text color on hover setting, there is a color option in which you can choose any color for the text color of the sticky bar on hover and also can choose a transparent option.
Toogle Icon
The toggle icon will appear only on the small size devices.
- Icon Color - You can choose any color of the toggle icon and can also have a transparent option.
Mega Menu
Megamenu is a type of expandable menu in which many choices are displayed in a two-dimensional layout. It is an excellent design choice for accommodating a large number of options or for revealing lower-level site pages at a glance.
- Background Type - Using this feature, user can choose the background type of mega menu as color or image.
- Background Color - This setting is used when the user selects the background type as Color. In background color settings, there is a color option in which you can choose any color for the background and also you can choose a transparent option.
- Background Image - This setting is used when the user selects the background type as Image. The user has to set the image for the background of the mega menu.
- Heading Color - In heading color settings, there is a color option in which you can choose any color for the heading of the megamenu and also you can choose a transparent option.
- Text Color - In text color, there is a color option in which you can choose any color for the text of the megamenu and also you can choose a transparent option.
- Text Color On Hover - In this setting, there is a color option in which you can choose any color for the text of the mega menu on hover and also have a transparent option.
- Icons Color - Using this setting, user can choose the color of the icon of the mega menu and can also choose the transparent option.
- Divider Color - Divider Color setting is used to set the color of the divider in the mega menu and also have the transparent option.
3.8 Social
3.8.1 Social Share
3.8.2 Add Social Page URL
3.8.3 Social Icons Border Setting
In these settings, you can change or add the social icon border settings.