Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 20, 2018 at 4:32 am #999155
    sparkzilla

    Hi, I have tried every solution on here but nothing works. My header is fixed at 50px in the theme settings. I would like to 1) have the header sticky on mobile and 2) keep the header height fixed at 50px for all window sizes. Currently, as the window size decreases, the header height increases. The various solutions on this forum result in the social icons and burger menus not being aligned with the logo.

    Please check http://newsblocks.io/home as a reference. Thanks!

    August 20, 2018 at 1:54 pm #999352
    Victoria

    Hey sparkzilla,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Please make sure you have the shrinking header disabled.

    Best regards,
    Victoria

    August 20, 2018 at 2:59 pm #999399
    sparkzilla
    This reply has been marked as private.
    August 21, 2018 at 10:28 am #999727
    Victoria

    Hi sparkzilla,

    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 #top #header_main > .container .main_menu .av-main-nav > li > a, 
  .responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
      height: 50px;
      line-height: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .responsive #top #header_main > .container .main_menu .av-main-nav > li > a, 
  .responsive #top #wrap_all .av-logo-container {
      height: 50px !important;
      line-height: 50px;
  }

  .responsive #top .logo {
      height: 50px !important;
  }
  .responsive #top #wrap_all .main_menu {
    height: 50px;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 21, 2018 at 4:51 pm #999891
    sparkzilla

    The sizing is perfect, but the header doesn’t stick to the top of the page on mobile.

    • This reply was modified 6 years, 4 months ago by sparkzilla.
    August 21, 2018 at 5:20 pm #999907
    sparkzilla

    It’s ok. I added:

    .html_header_top.html_header_sticky #header {
position: fixed !important;
}
    August 21, 2018 at 9:19 pm #1000020
    Victoria

    Hi sparkzilla ,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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