Main Menu

Main Menu

Attachments:

You must be logged in to view attached files.

Hello,

As for the main menu, it is possible to implement the underline in this way: https://gyazo.com/61df1f4400f57b4513d1e2fa3b8b3e4c

If you accept this please add this CSS code to the Theme Settings > Custom CSS:

.basel-navigation .menu>li.menu-item-has-children>a:hover {
text-decoration:underline;
}

.basel-navigation .menu > li.menu-item-design-default .sub-menu li a:hover{
	text-decoration:underline;
}

Best Regards

Hello first, thanks for the help but it should be like yours on the website of xtemos.com, if you go over the main menu buttons, with the mouse, should the gray underlined also makes this underscore hover effect. When you click the button or the bottom button, should the underlined be displayed. It would be great if the underscore has the same thickness as yours on the website.

Attachments:

You must be logged in to view attached files.

Hello,

Considering different HTML structure is not possible to do exactly as on xtemos.com

Best Regards

Hello, I’m a real fan of your work but it would be great if you could get the underline-from-left-hover-effcet on the site like at xtemos.com.
I think many others of your customers would also like the function and make the website just still proffisonler. Could you bring this feature into the next Ubdate?

Hello,

Sorry for the misunderstanding, but we need to first explain how this feature works on our xtemos.com site. Our studio made two e-commerce themes Basel (demo.xtemos.com/basel) and Woodmart (woodmart.xtemos.com). Site xtemos.com is built on Woodmart theme which has such option like “Underlined menu style”. For example, you can see it on our Woodmart demo pages like this one (https://woodmart.xtemos.com/demo-fashion/demo/fashion/).

As you can see from the Basel demo site it has no such menu style in theme design and unfortunately, we can’t easily transfer this style feature from one theme to another because of the different structure of theme menus. Changing this structure will affect the work of a thousands sites that already using our Basel theme.

Best Regards

Is it possible to make the underline thicker and to insert a distance how in the example image?
Is it possible that it is then inserted in all menu items?
(START, MEN, WOMEN, SALE%, LOOKBOOK)

Attachments:

You must be logged in to view attached files.

Hi,

Unfortunately, there are no padding and width properties for text-decoration: underline.

To achieve look that you described you can use the provided code, but it can work only in the site main menu.

.menu-home-container .menu > .menu-item > a {
	position: relative;
}

.menu-home-container .menu > .menu-item:hover > a:before {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	background-color: black;
	width: auto;
	height: 2px;
	bottom: 14px;
}

Thank you, she could also do the classes in the subcategories of MEN, WOMEN and SALE

Attachments:

You must be logged in to view attached files.

Hello,

Remove this code:

.basel-navigation .menu>li.menu-item-has-children>a:hover {
text-decoration:underline;
}

.basel-navigation .menu > li.menu-item-design-default .sub-menu li a:hover{
	text-decoration:underline;
}

And add this one:

.menu-home-container .sub-menu > .menu-item > a {
   position: relative;
}

.menu-home-container .sub-menu > .menu-item:hover > a:before {
   content: "";
   position: absolute;
   left: 15px;
   right: 15px;
   background-color: black;
   width: auto;
   height: 2px;
   bottom: 9px;
}

Best Regards

[Author]

Posts