Menu Graphics

Support
#1

Hi there,

I see that in pro there is the option to add graphics to a menu. I want to add graphics to a menu but only to 3rd level submenu items. How do I turn off the graphics at the sub level but not the level below. Hope that makes sense.

I found something on the support form that said to add this code to the Theme CSS and add “no.icon” to the Menu item.

.no-icon .x-anchor-graphic {
display: none;
}

However this didn’t work. Any ideas.

#2

Hi There,

Since it is same settings on the builder, try this CSS instead:

.x-menu-inline > li >.sub-menu > li >a >.x-anchor-content>.x-anchor-graphic img {
    display: none;
}
/*After hiding the image, link text will be squeezed. Let's vertical space between links using below CSS*/
.x-menu-inline > li >.sub-menu > li >a >.x-anchor-content> .x-anchor-text {
    padding-top: 10px;
    padding-top: 10px;
}

Hope this helps.

#3

Thanks for the quick reply, there was a very minor mistake on your code which I corrected, you accidentally wrote padding-top twice. I changed the second one to: padding-bottom: 10px;

But looking much better now.

My question now is how to reduce the sub menu width, but not the third level width.

#4

Hi,

You can try this code.

.hm18 .sub-menu .x-anchor {
    min-width: 0;
}

.hm18 li>ul.sub-menu.x-dropdown {
    width: 150px;
}

Change 150px to your desired width.

Hope that helps

1 Like
#5

Thanks for the quick reply. Unfortunately that doesn’t work. I am trying to change the width of the second dropdown level but adding that code changes both the second and the third levels, same as the customiser options on Pro Header builder.

#6

Hello @Londibob,

Sorry for the confusion. Please replace above CSS with following to change width of second level dropdown menu.

ul.sub-menu.x-dropdown ul.sub-menu.x-dropdown {width: 250px;}

Let us know how it goes.

Thanks.

#7

I did that then just had to remove the box shadow and it works fine for what I need, thanks for your quick assistance as usual.

#8

You’re welcome.

#9

This code is no longer working since upgrading.

#10

Howdy @Londibob,

Thanks for writing in! There was a CSS class name change on what was previously the .x-anchor-graphic to .x-graphic as it was refactored to be more general purpose and utilized across other elements (such as the new Headline Element). If you update your selector to reflect this new class name like so, you should get the intended result:

.x-menu-inline > li > .sub-menu > li > a > .x-anchor-content > .x-graphic img {
  display: none;
}

Cheers!

#11

Thanks for the amazingly quick reply.

#12

We aim to please. :slight_smile: Have a great day!