Mega Menu Background Repeating - Just Want Regular Links

Support
#1

I’ve set up a mega menu with images but I’d like to put regular text links underneath those, but when I try the first image in the mega menu keeps repeating like a background. Please help.

—Heather

#2

Here’s the login info:

Summary
#3

Hi,

You can add background-repeat:no-repeat;

eg.

.desktop .x-nav .x-megamenu>.sub-menu>li#menu-item-4789 {
    background-image: url(http://www.modernap.ca/wp-content/uploads/alucobond.jpg);
    background-repeat: no-repeat;
}

Hope that helps.

#4

Hi Paul

That fixes the background issue, but the menu items I added under the images in the mega menu aren’t showing up. If you hover your mouse over them, you can see that they are there, they just aren’t displaying for some reason.

Any suggestions?

Also when I put sub-menu items under the Fundermax image in the mega menu, it breaks the look of the 4 images across the top. I want to keep that and just have regular text with links underneath each one.

Thanks.

–Heather

#5

Hello Heather,

Your sub menu items is not displaying because you have this custom css:

.x-megamenu .sub-menu li a span {
    display: none;
}

.x-megamenu .sub-menu li a span {
    color: transparent !important;
}

Removing this css will display the items.

#6

Thanks. That was able to show the menu items but it broke the four images at the top that I wanted to keep. How do I put them into columns under each of the four images at the top?

#7

Hi Heather,

Unfortunately with your setup and custom CSS, I am little confuse right now with what you are trying to achieve.

Please try to remove this:

#menu-item-4789 a, #menu-item-376 a {
     padding: 0px 0px 45px 90px; 
}
.desktop .x-nav .x-megamenu>.sub-menu>li { /* This part is on additional CSS. Remove this because it makes submenu columns breaks to new ROW*/
    float: left;
    padding: 17px 28px;
}

Then add the following so the text is just below the image:

.desktop .x-nav .x-megamenu>.sub-menu>li#menu-item-4789 >a, .desktop .x-nav .x-megamenu>.sub-menu>li#menu-item-376 >a {
    margin-top: 49px;
    padding: 0px 0px 45px 0px;
}

It will fixed main column but then with the structure and your custom CSS, I am not sure what you want. Ubermenu documentation is very detailed, with chrome developers tools, feel free to inspect element and adjust those structure. See this guide: http://sevenspark.com/docs/ubermenu-style-menu-items