Vertical align text in image banner issue

[adriboixet]

Hi!

I copy and paste this code in html menu, but text “MEN” doesn’t align vertically center. Why??

[spb_image_banner image="171" image_size="full" fixed_height="220" content_pos="center" content_textalign="center" animation="fadeInUp" animation_delay="200" image_link="#" link_target="_self" width="1/1" el_position="first last" el_class="menunopadding"]
<h1>MEN</h1>
[/spb_image_banner]

The same code in normal page it works, but in menu no.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Please test this in Theme Options => Custom CSS:

.menu-item .image-banner-content.content-center {
    top: 26%;
}

[adriboixet]

Yeah thanks!!!

[David Martin – Support]

Great, no problem.

Thanks.

[adriboixet]

It’s possible to make one column width to 70% and other column 30%?

[David Martin – Support]

Not as such, you will want to customise the CSS. This is the CSS:

li.menu-item.sf-mega-menu[data-megamenucols="2"]>ul.sub-menu>li:first-of-type {
    width: 70%!important;
}

li.menu-item.sf-mega-menu[data-megamenucols="2"]>ul.sub-menu>li:nth-of-type(2) {
    width: 30%!important;
}

Ideally you should add a custom class the parent item menu item, then prefix the above CSS with the custom class.

Thanks.