Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • October 25, 2016 at 5:23 pm #703879
    pankaj_mangal

    I would like to make submenu sticky in mobile like desktop. How do I do that?
    Have a look at submenu here http://artofbicycletrips.com/tours/bombay-to-goa-bike-tour/

    October 25, 2016 at 8:28 pm #703952
    Nikko

    Hey pankaj_mangal,

    Kindly add this code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  #top {
    padding-top: 112px !important;
  }

  .responsive #top #wrap_all #header {
    position: fixed;
    top: 0;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    October 26, 2016 at 5:59 am #704112
    pankaj_mangal

    Hello Nikko,

    Thank you for reply. This makes the top header sticky. I want only the Fullwidth Sub Menu sticky. In this page :
    http://artofbicycletrips.com/tours/bombay-to-goa-bike-tour/ I want only the SUBMENU

    [OVERVIEW, ITINERARY, INCLUSIONS & MORE, REVIEWS, SIGNUP NOW]

    to be sticky.

    October 26, 2016 at 4:28 pm #704400
    Yigit

    Hey!

    Please edit your pages where you would like to apply these changes and then add following code inside Code Block element

    <style>
@media only screen and (max-width: 767px) {
.av-submenu-container {
    position: fixed!important;
    top: 111px!important;
}
#main {
    margin-top: 103px!important;
}}
</style>

    Cheers!
    Yigit

    October 27, 2016 at 4:08 am #704638
    pankaj_mangal

    I want to apply this to all pages wherever submenu is?

    October 27, 2016 at 2:08 pm #704829
    Yigit

    Hi,

    Please add Code Block element to your pages where you have submenu and place that code inside that Code Block element. It is not easily possible to target those pages using a CSS selector.

    Best regards,
    Yigit

    October 30, 2016 at 5:45 am #705752
    pankaj_mangal

    Hello,
    I tied putting in code block, it’s not working?
    Can I have a code which I put in Child Theme?

    October 30, 2016 at 5:47 am #705753
    pankaj_mangal

    in Child style.css?

    November 1, 2016 at 5:51 pm #706809
    Andy

    Hi,

    as Yigit already mentioned this won’t be possible. Please follow his instructions and use a code block element on the pages in question instead.

    Best regards,
    Andy

    August 22, 2018 at 5:43 pm #1000445
    Levante Golf

    Hi guys,

    I´ve used the code above:

    @media only screen and (max-width:767px) {
    #top {padding-top: 112px !important;}
    .responsive #top #wrap_all #header {
    position: fixed;
    top: 0;}
    }

    which works perfectly on mobile screens but when I alter the 767px to 990px to get it to work on the ipad burger menu it has no effect!!? Any suggestions on what I can do to get the same effect on ipad portrait (max-width 990px screens) would be awesome.

    Thanks in advance

    August 23, 2018 at 2:52 pm #1000762
    Victoria

    Hi ProTravelGolf,

    Try the code like this

    
@media only screen and (max-width:990px) {
    #top {padding-top: 112px !important;}
    .responsive #top #wrap_all #header {
         position: fixed;
         top: 0;}
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    August 23, 2018 at 4:31 pm #1000821
    Levante Golf
    This reply has been marked as private.
    August 23, 2018 at 5:44 pm #1000849
    Victoria

    Hi ProTravelGolf,

    I need to see the page with the issue to give you a better solution.

    Best regards,
    Victoria

    August 23, 2018 at 5:51 pm #1000855
    Levante Golf
    This reply has been marked as private.
    August 24, 2018 at 11:40 am #1001142
    Victoria

    Hi ProTravelGolf,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 989px) and (min-width: 768px) {
  .responsive.html_mobile_menu_tablet.html_header_top #top #main {
      margin-top: -90px;
  }
  .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
    top: 0;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 24, 2018 at 1:06 pm #1001190
    Levante Golf

    Victoria,

    That´s awesome thank you. I had to adjust the code slightly to the following but it´s now working great:
    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .responsive.html_mobile_menu_tablet.html_header_top #top #main {padding-top: 112px !important;}
    .responsive.html_mobile_menu_tablet #top #wrap_all #header {position: fixed; background-color: white!important;
    opacity: 1; top: 0;}
    }

    Thank you so much again!!

    August 24, 2018 at 2:19 pm #1001239
    Victoria

    Hi ProTravelGolf,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 22, 2021 at 10:17 pm #1321961
    Guenni007

    this is the only way i found to have sticky submenus on mobile and even with transparent header and sticky header !
    see: https://webers-testseite.de/transparent-header/
    https://kriesi.at/support/topic/how-to-make-the-submenu-sticky-on-mobile/#post-1225108

    But there is a lot to do: have some child-theme alb elements ( the menu.js and to ensure loading the child-theme menu-js – the menu.php too )

    and this is the reason for the trouble in menu.js:

    if( burger_menu.is(":visible") ){
	this.css({top: 'auto', position: 'absolute'}); fixed = false;
	return;
}
    February 22, 2022 at 7:32 pm #1341843
    spooniverse

    And for replacing this if-condition it is necessary to do all the stuff mentioned in the other entry?

    February 28, 2022 at 12:37 pm #1342537
    Yigit

    Hi @spooniverse,

    Yes, you would need to find following in menu.js file

    					if( burger_menu.is(":visible") )
					{
						this.css({top: 'auto', position: 'absolute'}); fixed = false;
						return;
					}

    and change it to following in your child theme

    if( burger_menu.is(":visible") && (scrolled + modifier > top_pos) ){
	this.css({top: header.Height() , position: 'fixed !important'}); fixed = true;
}

    Best regards,
    Yigit

    March 2, 2022 at 6:12 pm #1342885
    spooniverse

    Hey Guenni, since Enfold changed parts of the shortcode behaviour in Version 4.8.9 I changed your filter from this post to:

    add_filter('<strong>ava_builder_shortcode_files_loaded</strong>', '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.

    March 4, 2022 at 3:08 am #1343089
    Mike

    Hi,
    Thank you for sharing your filter, 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

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘sticky submenu in mobile’ is closed to new replies.