Tagged: fullwidth submenu
-
AuthorPosts
-
June 23, 2020 at 8:53 pm #1224942
Hey guys!
How do I make the Full Width SubMenu Sticky on Mobile?
June 23, 2020 at 11:41 pm #1224962only the submenu or do you like to have the header with burger fixed too?
June 24, 2020 at 12:26 am #1224970Hi! :)
Right now the Main Menu on Desktop & the Burger Menu on Mobile is Sticky (which is great). I love how it’s already set up.
I would also like the Main Menu and the SubMenu to both be sticky on this page (please see Private Section)
June 24, 2020 at 7:35 am #1225067Hi,
Please refer to the following:
Specifically Victoria’s post.
Best regards,
Jordan ShannonJune 24, 2020 at 10:41 am #1225108I do not see your site link – cause i’m participant as you – to give better advice it would be nice to know more about your header settings.
Well i guess this is not quiet simple as some like to have it.
To get the sticky header even on mobile and on transparency header this is just
quick css:
( i have on most of my installations the 990 break point for burger menu so: )@media only screen and (max-width: 989px) { .responsive #top #wrap_all #header .container { width: 90%; max-width: 90%; } #header { position: fixed !important; height: 80px !important; max-height: 80px !important; } .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency { background-color: transparent; } .responsive #top .av-logo-container , .responsive #top .logo a, .responsive #top .logo img { height: 80px !important; max-height: 80px !important; } .responsive #top .av-main-nav .menu-item-avia-special a { height: 80px !important; line-height: 80px !important; } }
__________________________ Just for Info – if you only interested in the solution skip to the next post ________________
The sticky state when burger is active depends on the menu.js and the condition for :
if( burger_menu.is(":visible")
my search here on the board resulted unfortunately only in hits, which commented out this condition, which if you test this of course does not lead to the goal.
so we had to find a calculation for that case – this can be found out more or less quickly – my solution is:if( burger_menu.is(":visible") && (scrolled + modifier > top_pos) ){ this.css({top: header.Height() , position: 'fixed !important'}); fixed = true; }
Info: i first had the header.outerHeight() – but with that i had a 1px difference on scrolling on – do not know why.
So far so good, but if you want to use a hamburger for the submenu in the responsive case, what is calculated in the script is unfortunately overwritten by the menu.css by setting values to !important.
Even the calculated inline style could not overwrite these settings because the selector is more specific f.e:/**** from original menu.css - each break point (switch ) has these rules set to !important *********/ @media only screen and (max-width: 989px){ .responsive #top .av-switch-990.av-submenu-container{top: auto !important; position: relative !important; height:auto; min-height:0; margin-bottom: -1px;} }
so we had to get rid of the important setting – thats why we need to have an own child-theme menu.css
June 24, 2020 at 10:47 am #1225113So my solution is to have all three alb files concerning to submenu in the child-theme shortcodes folder
Activate the usage of child-theme shortcodes instead of the parent files with this in child-theme functions.phpadd_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1); function avia_include_shortcode_template($paths){ $template_url = get_stylesheet_directory(); array_unshift($paths, $template_url.'/shortcodes/'); return $paths; } // End of child-theme shortcodes loading snippet
and download all three files from pastebin here ( based on enfold 4.7.5) :
menu.php : https://pastebin.com/dl/CudTKvh1 and look
menu.js : https://pastebin.com/dl/mTtFgR8K and look
menu.css : https://pastebin.com/dl/Ckpa9z7w and lookcreate a child-theme shortcodes folder via ftp and upload all files to that directory.
i had to set on that in quick css :
@media only screen and (max-width: 989px) { #top .sticky_placeholder { position: absolute; } }
But this may be due to the fact that this test website has so many settings in functions.php and quick css that it was overwritten.
Result f.e.: https://webers-testseite.de/transparent-header/
You can see there both ( all three ) cases inbetween 480 and 990 i have submenu and under 480 hamburger.
And: if there are more than one submenu the lower one gets sticky too if comes to the top.June 24, 2020 at 1:01 pm #1225169Perfect! Thank you!
June 24, 2020 at 1:16 pm #1225174Not too complex ?
If you need additonal help – tell meJune 24, 2020 at 3:42 pm #1225262Hi Courtney,
Glad you got it working for you with Guenni007’s solution! :)
If you need further assistance please let us know.
Best regards,
VictoriaMarch 2, 2022 at 6:13 pm #1342886Hey Guenni, since Enfold changed parts of the shortcode behaviour in Version 4.8.9 I changed your filter from this post to:
add_filter('ava_builder_shortcode_files_loaded', 'avia_include_shortcode_template', 15, 1); function avia_include_shortcode_template($paths){ $template_url = get_stylesheet_directory(); array_unshift($paths, $template_url.'/shortcodes/'); return $paths; }
I added your modifications to the latest theme files (Version 4.9) and it works as expected.
If anyone wants to do the same just remember the correct filter.
- This reply was modified 2 years, 7 months ago by spooniverse.
March 3, 2022 at 11:26 am #1342979hm – i can not believe this – because what i see on class-template-builder.php on line : 675 – this ava_builder_shortcode_files_loaded
is not a filter – the filter is still: avia_load_shortcodesMarch 3, 2022 at 11:28 am #1342980Thought so too but I tested it with your code and the files did not load correctly …
March 3, 2022 at 11:47 am #1342985now i have made the changes to Enfold 4.9 files:
and download all three files from pastebin here ( based on enfold 4.9) :
menu.php : look – download
menu.js : look – download
menu.css : look – downloadsee: https://webers-testseite.de/transparent-header/
( with child-theme shortcodes loading as mentioned in my first post – see: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb )
again here my question to the devs : is it realy necessary to have on menu.css set these rules ( top and position ) for media-query to be !important ?
f.e..responsive #top .av-switch-990.av-submenu-container{top: auto; position: relative; height:auto; min-height:0; margin-bottom: -1px;}
___________
and maybe again the question, if new filters and actions are introduced ( they also appear in the changelog ) can you give an example for the application on f.e.: Github – maybe in the comment what it is meant for. ThanksMarch 3, 2022 at 12:19 pm #1342987On my end it worked with the pictures too but content in the color sections lost its custom styling. After I changed to ava_builder_shortcode_files_loaded it was as shown in your example. At first I thought it was a problem with the older template files, thats why I made your changes in the 4.9 files again, but the problem was still there. So you still loaded the /shortcodes folder with the code form the documentation?
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1); function avia_include_shortcode_template($paths) { $template_url = get_stylesheet_directory(); array_unshift($paths, $template_url.'/shortcodes/'); return $paths; }
If the “!important” was omitted in parent theme it would be sufficient to only load the menu.js in the child theme, correct?
March 4, 2022 at 11:18 am #1343099i use all three files – the php file is only necessary because we had to load the child-theme css and js file.
in the css parent file there are some settings to be !important. This is not possible to overwrite from external ( quick css ) css.March 4, 2022 at 11:36 am #1343105I understand that. The question was if we would just have to load menu.js in the child theme if in the parent theme were no !important-rules?
March 7, 2022 at 4:49 am #1343431Hi,
The correct filter to create new shortcode paths is still avia_load_shortcodes. The ava_builder_shortcode_files_loaded is actually a hook, not a filter, so you cannot use that to adjust the shortcode paths directly. Unfortunately, your questions above is a bit unclear. Would you mind elaborating a bit in a new thread or ticket?
Best regards,
IsmaelMarch 7, 2022 at 12:41 pm #1343467Hey Ismael, I don’t know why, but in my tested installation only this code works as expected:
add_filter('ava_builder_shortcode_files_loaded', 'avia_include_shortcode_template', 15, 1); function avia_include_shortcode_template($paths){ $template_url = get_stylesheet_directory(); array_unshift($paths, $template_url.'/shortcodes/'); return $paths; }
The code from the documentation does interfer with loading the correct stylesheet for the rest of the page …
My question was directed @Guenni007, I just wanted to understand his note to the devs better (see post-1342985). I just wanted to know if it would be sufficient to only load the menu.js in the child theme if the “!important” was omitted in parent theme.
March 8, 2022 at 6:17 am #1343561Hi,
That code should not be working because ava_builder_shortcode_files_loaded is not a valid filter. Are you sure that the avia_load_shortcodes was not added to the site?
Best regards,
IsmaelMarch 8, 2022 at 9:40 am #1343581Strange. Only in this way it works as intended. The one other code that interferes with styles and the child theme is this (from Guenni007 too):
add_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_script', 100 ); function wp_change_sticky_header_script() { wp_deregister_script( 'avia-sticky-header' ); wp_enqueue_script( 'avia-sticky-header-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('avia-default'), $vn, true); }
As mentioned above, everything works on my end, just not with avia_load_shortcodes. It is not added to the site in any other way or twice in the functions.php …
Is that a problem?
In the end I don’t want to interfere with Guenni007’s question at the devs (post-1342985), I just wanted to give a short notice to others having the same problem that the code is not working, but maybe it is just me having this malfunction.
March 10, 2022 at 4:46 am #1343939Hi!
again here my question to the devs : is it realy necessary to have on menu.css set these rules ( top and position ) for media-query to be !important ?
Did you test this already? Is it working properly without the !important rule in the following css?
.responsive #top .av-switch-990.av-submenu-container{top: auto !important; position: relative !important; height:auto; min-height:0; margin-bottom: -1px;}
Cheers!
IsmaelApril 7, 2022 at 5:21 pm #1347600Since latest Enfold update all of Guenni007’s files are working fine. With standard child-theme shortcode loading as described in the documentation.
@Ismael: I am testing the files for some weeks, in my opinion everything is working fine without the!important
April 8, 2022 at 3:54 am #1347653Hi,
Glad Guenni007 & Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘How To Make The SubMenu Sticky On Mobile’ is closed to new replies.