Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 2, 2025 at 8:00 pm #1492040
    jimmiemoreland

    Hello, Id like the Sticky Header on MOBILE as I want my Phone number always displayed at the top when a user scrolls. I found the code below, but it doesnt do anything.

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .main_menu {
    position: relative;
    width: 100%;
    }
    }

    December 3, 2025 at 7:38 am #1492043
    Ismael

    Hey jimmiemoreland,

    Thank you for the inquiry.

    You can add this css code to make the header sticky on mobile. Make sure to adjust the top padding based on the header’s height.

    @media only screen and (max-width: 989px) {

  /* Add your Mobile Styles here */
  .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
  }

  .responsive.html_header_top #top #main {
    padding-top: 120px !important;
    margin: 0;
  }
}

    Let us know the result.

    Best regards,
    Ismael

    December 9, 2025 at 2:30 am #1492269
    jimmiemoreland

    Just tested. It’s not working.

    December 9, 2025 at 7:41 am #1492281
    Ismael

    Hi,

    Thank you for the update.

    It seems to be working correctly on our end. Please provide the site URL in the private field so we can check this further –screenshots would also be helpful.

    Best regards,
    Ismael

    December 9, 2025 at 8:55 am #1492283
    Guenni007

    try – and read comments:

    @media only screen and (max-width: 989px) {
  /*** depends on if a header_meta is present and the height of it ***/
  /*** header_main plus header_meta height value is needed ***/
  #header {
    position: fixed !important;
    height: 120px !important;
    max-height: 120px !important;
  }
  
  /*** synchronise with header height value ***/
  .responsive.html_header_top #top #main {
    padding-top: 120px !important;
  }
}

/*** necessary – because your header_meta will then have two lines   ***/
@media only screen and (max-width: 521px) {
  #header {
    position: fixed !important;
    height: 140px !important;
    max-height: 140px !important;
  }
  /*** synchronise with header height value ***/
  .responsive.html_header_top #top #main {
    padding-top: 140px !important;
  }
}

    Ismael’s rules don’t work properly because a selector that I also thought was present is not there: html_mobile_menu_tablet
    My notes on this case of sticky headers on mobile devices always included this selector too.

    December 9, 2025 at 9:06 am #1492284
    Guenni007

    but if it is that lonestar page – you had to adjust a lot of different things.
    First : you might better switch to hamburger menu on wider screens – even wider than the other option of 989px

    f.e.

    @media only screen and (max-width: 1399px) {
    #top #header .av-main-nav > li.menu-item  {
        display: none!important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;
    }
}

    or you use a combination of hamburger switch adjust and on enfold option :
    header – header behaviour – : Let Logo And Menu Position Adapt To Browser Window

    December 9, 2025 at 9:37 am #1492286
    Guenni007

    next the first section of your homepage
    I can’t quite understand how it was set, because it gets completely out of hand in responsive cases.
    maybe you have set a column to a min-height value that is not good for mobile view.

    December 9, 2025 at 1:52 pm #1492298
    jimmiemoreland

    I looked at it and one column had a height set of 95%, I’ve removed that.

    I’ve been playing with that to try and get the background image set and the content placed properly.

    December 10, 2025 at 8:22 am #1492332
    Ismael

    Hi,

    Thank you for the update.

    Please create a test page and provide the page URL — screenshots will also help. You can use platforms like Freeimage, ImgBB, PostImages or Dropbox to upload and share the screenshot.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.