mega menu & full width map

Hey Yaphoon,
For your Gaode Map page try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.responsive #top.page-id-53 #av_section_1 .container {
	max-width: 100%;
	padding: 0;
}
.responsive #top.page-id-53 #av_section_1 .container main {
	padding: 0;
}

the expected results:

as for your mega menu, it looks like each of your menu items is a column title which by defalt has a different color and font size than the regular menu items:

so perhaps you could adjust the mega menu items to correct your font size and color.
I don’t know what you mean by “adjust the square size”, if you mean the whole mega menu size, it is created by the number of items in it with js and not easy to change.

Best regards,
Mike

Hi,

Glad to hear this helped the map issue, I see the your mega menu items are still column titles, have you tried to change them to regular menu items? Doing this will make the fonts size smaller and the width smaller, like this mega menu example:

unless you specifically only want to use column titles?
If so then try this css and adjust the font to suit:

#top #header .mega_menu_title,
#top #header .mega_menu_title a {
    font-size: 12px;
}

To make the meag menu smaller tru this css and adjust to suit:

#header .avia_mega_div.twelve.units {
    width: 602px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
This page is not created the same way, please put the code block with the map inside of a color section and then try this css:

.responsive #top.page-id-159 #av_section_1 .container {
	max-width: 100%;
	padding: 0;
}
.responsive #top.page-id-159 #av_section_1 .container main {
	padding: 0;
}

Best regards,
Mike