Add Fullwidth Sub Menu to Header.php across whole website

Hi,
In the code above, the “menu=’25′” sets the menu.
To find out what the number is of the menu you wish to use, please go to your menus and use the inspector on the drop down to see the numbers.

If this doesn’t help, please include a admin login in the private content area and tell us which menu you would like to use.

Best regards,
Mike

Hi,
Thanks for the link, so you would like this menu to show on every page but only for mobile?
When you tried the function above how was it “broken”?
Please include an admin login in the Private Content area so we can test the function and shortcode.

Best regards,
Mike

Hi,
Thanks for the login, but it doesn’t seem to be an admin login, I can not see your pages, menus, theme editor > functions.php, etc
please check.
Since the function has to be added into your functions.php and your site crashed when you tried I a little leery of trying, can you also include FTP access so if the site crashes I can remove the function and get your site back online?

Best regards,
Mike

Hi,
Thank you for the admin login, so the reason the code crashed your site is because your sub-menu shortcode contains HTML in the menu text field which uses double quotes " so when it’s added to the PHP code above the quotes must be escaped with a backslash.
So I added this code to your functions.php:

add_action('ava_after_main_title', 'ava_after_main_title_mod');
function ava_after_main_title_mod() {
	if(is_page()) {
		echo do_shortcode("[av_submenu which_menu='custom' menu='16' position='center' color='main_color' sticky='aviaTBsticky' mobile='disabled' av_uid='av-k2hq150d' custom_class='yuppie']
        [av_submenu_item title='<span class=\"av-icon-char\" style=\"font-size:32px;line-height:18px;padding-right: 10px;\" aria-hidden=\"true\" data-av_icon=\"\" data-av_iconfont=\"entypo-fontello\"></span><br>Събития' link='manually,https://www.yuppie.cherry-adv.net/events/' linktarget='_blank' button_style='av-menu-button av-menu-button-colored' av_uid='av-owwd3']
        [av_submenu_item title='<span class=\"av-icon-char\" style=\"font-size:32px;line-height:18px;padding-right: 10px;\" aria-hidden=\"true\" data-av_icon=\"\" data-av_iconfont=\"entypo-fontello\"></span><br>ДемоУрок' link='page,638' linktarget='_blank' button_style='av-menu-button av-menu-button-colored' av_uid='av-ne7zz']
        [av_submenu_item title='<span class=\"av-icon-char\" style=\"font-size:32px;line-height:18px;padding-right: 10px;\" aria-hidden=\"true\" data-av_icon=\"\" data-av_iconfont=\"entypo-fontello\"></span><br>Блог' link='page,747' linktarget='_blank' button_style='av-menu-button av-menu-button-colored' av_uid='av-fnlwn']
        [av_submenu_item title='<span class=\"av-icon-char\" style=\"font-size:32px;line-height:18px;padding-right: 10px;\" aria-hidden=\"true\" data-av_icon=\"\" data-av_iconfont=\"entypo-fontello\"></span><br>Like us' link='page,601' linktarget='_blank' button_style='av-menu-button av-menu-button-colored' av_uid='av-6phgf']
        [/av_submenu]");
	}
}

I added a custom class “yuppie” to the sub-menu to better apply the css across all of your pages and then added this css to your Quick CSS:

.yuppie.av-sticky-submenu .av-subnav-menu a,.yuppie.av-sticky-submenu,.yuppie.av-sticky-submenu .av-menu-button-colored > a .avia-menu-text {
	background-color: #ee3f6a;
    color: #ffffff;
    border-color: #ee3f6a !important; 
    padding: 0px !important; 
}
.yuppie.av-sticky-submenu .av-subnav-menu > li.menu-item {
    width: 24.30%;
    text-align: center;
}

So now pages such as /the-little-gym/ which don’t have the sub-menu element in the backend now show the sub-menu on the frontend on mobile. But pages that do have the old sub-menu element on the backend such as /detski-centar-yuppie/ now show the old sub-menu on top of the new sub-menu, so please remove these.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the screenshots, my understanding is that this is your homepage and the duplicate content has been added for desktop and mobile, so for some reason adding the sub-menu as shortcode via your functions.php has triggered both to show at the same time.
I have not seen this happen before and as I investigate I notice that for the elements on your page you are using characters typically not allowed for IDs in the “Developers: Section ID” as custom IDs such as spaces, pipes, exclamation points, etc

I’m not sure what effect this would have, if any, but I would recommend against this, a good ID would be like: “uslugi-amakids-mobilen”
I also note that you are using Enfold v4.4.1 which had quite a few errors with WooCommerce, and Events Calendar, which you are using, please see our changelog. I would recommend updating, but unfortunately due to how Theme Forest replaced the API key with the new Token you will have to update via FTP.

The easiest and safest way to do this is to download the newest version from Theme Forest and rename your current theme folder to “enfold-old” via ftp then upload the new “enfold” folder and check that your site is working correctly.
Once you are happy you can delete the “enfold-old” folder via ftp, (not the WP theme page)
Should for some reason you wish to roll-back to the old version, it’s easy to do, simply rename the new “enfold” folder to “enfold-new” via ftp and then rename “enfold-old” to “enfold” then refresh your page.
Please don’t try to overwrite the theme folder, as this will leave old files behind and cause errors.

Best regards,
Mike