Mega Menu Pull Downs - Display Background Colour Across Full Page Width - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Mega Menu Pull Downs - Display Background Colour Across Full Page Width

L

Linda

Template 3 years ago

Pitech template Joomla 4.0.2

Hi, I am using the Pitect template and I wish to display the mega menus pull downs for selected menu items from the main menu as full page width - About, Councils and Farmers & Growers, similar to what has been done in the Wimble template under the mega menu in the the Pages main menu item. Can you please advise how to achieve this? Thank you.

0
10 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #52267

Hi

Could you please give me a demo so that i can understand it properly?

-Regards

0
L
Linda
Accepted Answer
3 years ago #52289

Joomshaper Wimble template under the mega menu in the the Pages main menu item. I want to have it extend to the whole width of the screen like this. https://www.joomshaper.com/joomla-templates

I have an image to show you, but not sure how I am meant to attach it so you can see it. The insert image icon doesn't seem to work for me.

0
L
Linda
Accepted Answer
3 years ago #52292

See below for samples in the hidden content.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #52368

Allow us some time please we need to check is it possible or not

0
L
Linda
Accepted Answer
3 years ago #52443

Okay, thank you.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 years ago #52651

Hello Linda

Please look at Wimble Pages Mega Menu settings. Here width is 600px and there are differences in the layout and module positions. https://prnt.sc/26epsc8

Now, check with Pitech template and manage the layout you want.

Best regards

0
L
Linda
Accepted Answer
3 years ago #52755

Thank you for your response, however, this hasn't really helped me. As you will see in link sample3 in the hidden section below, my setup is the same as the Wimble template but I still don't have a full page width coloured background.

The only difference being that I had to set up the three menu items in separate columns because they came out as a single column with no gaps between them.

So, how do I achieve a full page width coloured background?

Thank you.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 years ago #52904

After more inspection, I have found that it is designed with CSS. Please use this CSS to Template Options -> Custom Code -> Custom CSS

body.ltr .sp-megamenu-parent .sp-dropdown.sp-dropdown-main.sp-menu-full>.sp-dropdown-inner:before {
    content: "";
    position: absolute;
    top: 0;
    right: 58%;
    bottom: 0;
    width: 3000px;
    background-color: #fff;
    background-image: linear-gradient(95.55deg, rgba(255, 22, 111, 0.5) 4.25%, rgba(255, 109, 47, 0.1) 93.67%);
}
body.ltr .sp-megamenu-parent .sp-dropdown.sp-dropdown-main.sp-menu-full>.sp-dropdown-inner:after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
    width: 3000px;
    background-color: #fff;
}

and you will also get similar thing. But this is not all. There are more styling used in Wimble template. Unfortunately, we do not provide customization support. So, I cannot make this for you. You can hire someone to do the CSS trick for you.

0
L
Linda
Accepted Answer
3 years ago #52997

Agreed, still lots of issues there. Thank you.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 3 years ago #53042

You are welcome, Linda

0