How to have a full width submenu automatically display on all pages

Hi,

Please remove the code from footer.php and try adding this at the very end of your themes / child themes functions.php file. It can be accessed from Dashboard > Appearance > Editor > functions.php

If you have any trouble please get back to us with your FTP credentials so we can take a closer look at it.

Best regards,
Vinay

• This reply was modified 7 years, 10 months ago by Vinay.

Hi,

put this code into your functions.php:

//set builder mode to debug
add_action('avia_builder_mode', "builder_set_debug");
function builder_set_debug()
{
	return "debug";
}

Afterwards use this shortcode when editing your page:

[av_submenu which_menu=” menu=’57’ position=’center’ color=’main_color’ sticky=’aviaTBsticky’ mobile=’disabled’]
[av_submenu_item title=’Menu Item 1′ link=” linktarget=’no’ button_style=”]
[av_submenu_item title=’Menu Item 2′ link=” linktarget=’no’ button_style=”]
[/av_submenu]

Best regards,
Andy

Hi,

I understand what you are trying to do, the shortcode cannot be used directly in footer.php file.

Please paste the html code of the menu (see private content) in the footer.php at the very top before the

<?php 

This will display the menu on top of the footer on all pages for you :)

Best regards,
Vinay

• This reply was modified 7 years, 10 months ago by Andy.

Hi,

Great we are on the same page!

1. To correct the URL’s please copy and paste the code into a text editor like sublime text and replace all the URL’s
<a href="http://dev.domain.com/" itemprop="url">
2. To change the background color please use the below CSS

#menu-main-lower {
background: #17ba71;
}
#top #menu-main-lower > li > a {
    border-color: #FFF;
}

3. The mobile menu works fine could you please elaborate what is not showing ?

Best regards,
Vinay

• This reply was modified 7 years, 10 months ago by Vinay. Reason: Edited domain name

Hi,

Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can always hire a freelancer to do the job for you :)

As an alternate solution the current footer links can be displayed with the main menu items in the hamburger menu that appears in mobile devices.

1. Enable CSS classes from the screen options on the top right of the pages.

2. Add the below code to quick css.

/*Show only in mobile or desktop*/

@media only screen and (min-width: 769px) {
.only_mobile { display: none !important; }}

@media only screen and (max-width: 768px) {
.only_desktop { display: none !important; }}

3. Add the menu items in footer to the main menu with a class name “only_mobile” from Appearance > Menu > Main menu
News
Media
About
Contact

4. Hide the footer menu in mobile device with the below CSS code.

@media only screen and (max-width: 768px) {
.menu-main-lower { display: none !important; }}

5. To view the html code please right click the element and select inspect.

Best regards,
Vinay

Hi,

To get the html code of any page element right click on the element in this case “menu” (in frontend view) and select inspect. This will show you the menu list inside a UL tag. Again right click on the UL tag in the html code and select Edit. This will allow you to copy the html code as mentioned earlier in point no 5 and do check out the video link that shows you how to use the chrome dev tools, it can be very handy tool for you :)

Best regards,
Vinay