Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
    Posts
  • #722564

    I need a full width menu at the very top of the footer area, but have figured out only one way to do it and that’s by adding a full width submenu item to the bottom of a page. However, this requires manually adding it to all pages and posts and blog category pages – not feasible. What is the solution?

    #723462

    Hey m,

    Try to add/execute the fullwidth submenu shortcode in footer.php.

    Best regards,
    Nikko

    #724533

    How do I get the shortcode? I tried getting it within WP admin, but it’s not listed as an available shortcode.

    #725777

    Hi,

    Try adding this code at the bottom of functions.php:

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

    Then try to create a new page, just add the fullwidth submenu, then the shortcode would appear at the bottom. Let us know if this helps.

    Best regards,
    Nikko

    #729132

    Pasting the shortcode into footer.php just shows the code on the page.

    #729133

    [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]

    #729144

    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, 11 months ago by Vinay.
    #729167

    Adding this to the end of the child functions.php crashed the site:
    [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]

    I have removed it again so the only change to the functions.php is that the debug code is still there. There are no changes now to the footer.php since adding the submenu code to it just showed the code on the webpage.

    #729538

    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

    #730163

    Thanks, like I said, the debug code is already in the functions.php. Regarding the submenu code, I don’t know where to put it exactly. It needs to automatically display on all pages with the footer.

    #730410

    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, 11 months ago by Andy.
    #730505

    Thank you, getting there!

    1. The urls are for the dev server so they will break when the site is launched. How can it be changed so that this doesn’t happen?
    2. The background is white but should be green. The separator bars are blue but should be white. How is this fixed?
    3. The menu items don’t show in the mobile menu. What can be done about that?

    #730542

    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, 11 months ago by Vinay. Reason: Edited domain name
    #730723

    Please see my note attached.

    #730726

    1. Is your code sample a special code that I can change now and that means I don’t have to change the code at launch time, or is it just showing me an example of code that I will need to change at launch time?

    2. Perfect! Thanks!

    3. On mobile, there is a different nav box in the top right corner. The submenu items do not show in it. They need to be there for easy access.

    #730892

    Hi,

    1. You need to use a child theme and add the code in the child theme footer.php that way when the theme get’s updated your customizations won’t be lost.
    For more info please check http://kriesi.at/documentation/enfold/using-a-child-theme/

    2. :)

    3. To give access to submenu on touch device please use a # instead of the about page link and make the actual about page a subpage.

    Best regards,
    Vinay

    #731720
    #731903

    Hi,

    1. I have tested this code and it works don’t worry about the old reply at the moment.

    3. In Appearance menu > main menu >

    Delete the about menu and create a custom link with just “#” in the link option. Then add the rest of the submenus to the About menu.

    Best regards,
    Vinay

    #732154

    3. Why should the main menu About item be changed? The issue is that the entire green submenu does not show as links in the mobile navigation box. Please see the three screen captures.

    #733507

    Hi,

    WP login you’ve provided does not work anymore. Can you provide us a new login please?

    Update the theme to the newest version (v3.8.4). Deactivate “Hide Mobile Menu Submenu Items” inside Enfold->Header->Mobile Menu

    Best regards,
    Andy

    #734389

    I made these changes, but still don’t see the submenu items in the mobile nav box.

    #735457

    Hi,

    abut which submenu items are you talking about? all you menu items from desktop view are displaying fine on mobile too. On desktop there are no submen items, see: http://i.imgur.com/s5kjg99.png

    However, I noticed that you are using a caching plugin. Would you mind opening your plugin’s settings page and temporarily deactivate the caching of your site? Then please try to clear your browser cache and hard refresh the site (Hold CTRL + SHIFT + RELOAD) to see if that solves the issue.

    Best regards,
    Andy

    #735501

    Your picture shows the main upper menu. This is not the green lower submenu, as per the link I provided previously (see private content)
    The cache plugin has not been activated yet.

    #736631

    Hi,

    The moment “About” menu is clicked the browser redirects the user to the about page link. Hover feature does not work on all mobile devices. Let’s add a submenu icon and toggle the submenu when the icon is clicked. This customisation will take some time but we are happy to help you :)

    Please confirm if this is what you are trying to achieve ?

    Best regards,
    Vinay

    #736640

    Thanks Vinay for that idea. What I’m really trying to do has to do with the face that there is a top right menu box on mobile/small screens that replaces the white upper menu. I want the green lower submenu items to also be listed in the existing top right menu box the same way that the white upper menu items are already. Is that possible?

    #736642

    Also, I have created the custom menu item with only # in the url box. But I need to know how to get the html that needs to go into the footer.php. The debug feature only shows shortcode.

    #737157

    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

    #737504

    I need to know how to get the html that needs to go into the footer.php. The debug feature only shows shortcode. –> You gave me the html code for the shortcode to use in the footer.php on January 6, 2017 at 5:02 pm. I need to know how to get the html without needing you to give it to me, otherwise this entire solution is not useful. (The footer could be changed many times in the future!)

    #737585

    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

    #737846

    Yes!! Everything is working!!!! Yay!!!!!! Thank you very much. :D

Viewing 30 posts - 1 through 30 (of 30 total)
  • The topic ‘How to have a full width submenu automatically display on all pages’ is closed to new replies.