Header Design

I need some small customization in the header.

1. I want small letters in the main navigation https://prnt.sc/o8a8rh
2. I want my mega menu dropdown effect / shadow / letter spacing and width like this. https://gyazo.com/1101e24577cfd52e62ee880b8fd545a2
3. I want to increase the width of slider https://gyazo.com/f69e65065e048809729a1a99a833c348 (it is set in full width now but now showing full width)
4. Where can i get the font awesome list to check the fonts.

Hello,

1. You can change the font by means of Advanced typography option, which allows to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

2. Please provide your site URL we shall check if it is possible to do.

3. Please refer the Slider Revolution documentation to configure your slider https://www.themepunch.com/revslider-doc/slider-setup/#slidertype

Make sure the row is full-width.

Best Regards

1. You didn’t get me. i mean i want header letters in lowercase.
2. Here is the link of the website http://www.wayfair.com for header mega menu dropdown.
3. i don’t want to put Revolution Slider. I am using woodmart slider. So let me know how to increase the width of slider https://gyazo.com/f69e65065e048809729a1a99a833c348 (it is set in full width now but not showing full width)
4. Font awesome icon list?

Hello,

1 and 2 please add this code to the Theme Settings > Custom CSS > Global:

body .woodmart-navigation .item-level-0>a {
    text-transform: none;
}
body .woodmart-navigation .item-level-0.menu-item-has-children:hover {
  position: relative;
	box-shadow: 0 0 3px rgba(0,0,0,.15);
	border-radius: 5px 5px 0 0;
}

3. Enter the slides and make the row full-width https://xtemos.com/docs/woodmart/woodmart-slider/ then make the full-width for the row which contains the slider https://wpbakery.com/video-academy/full-width-row/

4. Here is the source for icons supported by our theme https://fontawesome.com/v4.7.0/icons/

Best Regards

Thanks for the reply. It’s very helpful. I have some more query

1. Reduce the space between the menu html block check the link https://gyazo.com/dc569709f986093490bc8e3410d39425
2. Add background image in menu like this https://gyazo.com/9ab222718ff4164d10fe043a5dfc5ef5
3. Add notification icon next to account icon in the header, it’s for contact and faqs pages. Like this https://gyazo.com/c37ddc3fc1c15da3cdacae0de65423d8

Hello,

1. Please add this code to the Theme Settings > Custom CSS > Global:

body .mega-menu-list .sub-sub-menu li a, .menu-mega-dropdown .sub-sub-menu li a {
    display: block;
    padding: 0;
    font-size: 14px;
    line-height: 14px;
}

Change padding and line-height as per your needs.

2. Find the HTML block which is added to the menu item and set the background image https://wpbakery.com/video-academy/add-row-column-background-wpbakery-page-builder-wordpress/

3. Try to do it by means of an information box https://xtemos.com/docs/woodmart/header-builder/add-edit-builder-elements/

Best Regards

Thanks Again!

The Mega menu background image are not align to the top and the right. please check screenshot.
https://gyazo.com/5095c6bdaecdd6a1931fd99643eb2ae9

Hello,

Enter the HTML block applied in this menu item and set margin-top:-40px in the upper row settings: http://prntscr.com/lexqqs

Best Regards

Thanks Again!
1. I want to remove the category icon from header only https://gyazo.com/a8c7e7539ed6d6a79739d5d213d5e5d5
2. Change the tooltip position from upper right to right of the text. https://gyazo.com/9457c2e7933e0f695ee689a6d58f12c3
3. In mobile menu search is not working or search bar are not showing. I want when we press search icon it will pop search bar. https://gyazo.com/9d2cf41db1cf573f5373f89e6507b4e9

Hello,

Please provide your site admin access to the private area.

Best Regards

Please check

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.whb-header-bottom .main-nav .item-level-0 > a img{
display:none;
}

You would better remove the icon from this field.

Tooltip is not possible to put in the right because it can only be fixed to the right and sometimes it would overlap the text http://prntscr.com/oc7jf4

Try this code:

body .menu-label {
    bottom: 0;
    margin-left:0;
    right: -50px;
}

The search in mobile can be only as a form. The icon would just call the mobile menu. It is the way it works and cannot be changed.

Best Regards

Thanks Again!!!
Have some more questions.

1. I want to look my product search and shop pages arrange and look like this, like short description, veiw details/Add to cart button https://gyazo.com/9e4fe127575de069114639cc8c028195
website link: https://www.directdoors.com/collections/external-doors

2. Is it possible to add this mm to inch filter in product page and multiple selection option like this. https://gyazo.com/1def33bab208f14303793ac460b0e7c0

3. I want product title and breadcrumbs like this https://gyazo.com/358d0a66b61a342ddcd2a658fae7942e not like this https://gyazo.com/ed29cb44fc58b0b123a568653a8b89e2

Hello,

1. You can find different types of product grid design in the Theme Settings > Shop > Product Styles, consider the design with the summery.

2. The default Woocommerce does not provide such an option. Seems it is a plugin.

3. Such modification requires the complete Woocommerce template customization which is not covered by our support.

Best Regards

[Author]

Posts