Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 24, 2022 at 7:23 pm #1349293
    Kelly Erickson

    Hi there!
    I wanted to have a sticky header on mobile & tablet sized devices, but the code I found in the forums (this one specifically) isn’t 100%.

    Here’s the code I have inserted for that mobile header: 

    @media only screen and (max-width: 1260px) {
  nav.main_menu {
    display: block !important;
  }
  .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
  #top .social_bookmarks { display: none !important; }

.responsive #top .logo {
    width: 40%;
}
.responsive #top #wrap_all #header {
    position: fixed;
}
.responsive #top #main {
    padding-top: 50px !important;
}
}

    You’ll see I have some additional stuff in there to hide the social media section as well as size the logo properly.

    The problem then is that the header/navigation ends up covering the content I have at the top of my pages (see screenshot links in the Private Content). That last section of code is meant to push the top part of the page down to accommodate the sticky header, but it messes up the tablet view and isn’t a great fix for a responsive site.

    I’m wondering if there’s any way to set it up so the navigation “sticks” only on scroll? That might solve the top-of-page content issue.

    I’m also wondering if there’s a way to fix the tablet view so it doesn’t have the blank area to the right of the burger menu where the social media icons are “hidden”? Screenshot of the home page provided.

    Thanks in advance!

    April 24, 2022 at 7:44 pm #1349295
    Kelly Erickson

    Also note that, for the sake of the forum, I did have to make an adjustment to the code that hides the social media icons in the mobile header. The code ended up also hiding the social media links in the socket for some reason, so I had to do some more digging.

    I removed this:
    #top .social_bookmarks { display: none !important; }

    Replaced with:
    .responsive #top #header .main_menu .social_bookmarks { display: none !important; }}

    And it worked better!

    April 25, 2022 at 2:04 pm #1349409
    Ismael

    Hi,

    Thank you for the inquiry.

    You may need to adjust the top padding of the main container with the following css code. Make sure to insert the code inside one of the css media queries for mobile view. 

    .responsive #top #main {
    padding-top: 70px !important;
}

    Best regards,
    Ismael

    April 29, 2022 at 7:56 pm #1349986
    Kelly Erickson

    Still really isn’t ideal since my content is not really adjusting for that padding. But I’ll live with it!

    Can we address my 2nd problem with the tablet view still showing the area where the social media icons are hidden?

    May 2, 2022 at 5:41 am #1350148
    Ismael

    Hi,

    To remove the space for the social media icons, please try to add this css code inside the css media query.

    .avia-menu.av_menu_icon_beside {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
}

    Best regards,
    Ismael

    August 1, 2022 at 10:56 pm #1360213
    Kelly Erickson

    That worked, thank you! We can close out this thread :)

    August 2, 2022 at 2:01 am #1360224
    Nikko

    Hi kellyCraftMedia,

    I’m glad that Ismael could help you :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Sticky mobile header on scroll’ is closed to new replies.