Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 24, 2025 at 7:32 pm #1484615
    TESLA

    Customer request: Fixed header even in mobile resolution.

    This was possible by default – even on mobile. Now the enfold backend says that the mobile resolution ignores it… (1)
    a) Why is this? I know it definitely worked.
    b) How can I configure it anyway?
    c) How can I control the appearance of the header so that it doesn’t take up too much space, especially in landscape mode (where it was always too bold)? Like:

    /***** HEADER *****/ 
.class {
      max-width: 100%;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.class {max-height: px;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.class {max-height: px;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.class {max-height: px;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.class {max-height: px;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.class {max-height: px;}
}
    May 25, 2025 at 10:03 pm #1484661
    Mike

    Hey Sven,
    The fixed header on mobile devices has never been an option because the Dev Team has always felt that it takes too much space on mobile devices, over the years the only option was to add some custom css to achieve this.
    To have a fixed header on your site and have a small header so it doesn’t take up as much space you can try this css, I specifically created it for your site and it works in my tests.

    @media only screen and (max-width: 989px) {
    .responsive #top #wrap_all #header_main .container.av-logo-container {
        height: 40px !important;
        line-height: 40px;
    }
    #header_meta .container {
    		min-height: 12px;
		}
		#header_meta .phone-info {
    		line-height: 12px;
    		padding: 0;
		}
		#header_meta {
    		min-height: 12px;
		}
		#header_main {
			height: 40px;
			line-height: 40px;
		}
		.responsive #top #header_main>.container .main_menu .av-main-nav>li>a,
		.responsive #top #wrap_all .main_menu {
        height: 40px;
        line-height: 40px;
    }
    .responsive .logo img, .responsive .logo svg {
        max-height: 40px;
        padding: 0;
    }
    .responsive #top .logo,
    .responsive #top .logo a {
    		height: 40px !important;
    }
    .avia-section-huge .content, .avia-section-huge .sidebar {
    		padding-top: 50px;
    		padding-bottom: 50px;
		}
		.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: 40px;
        line-height: 40px;
    }
    .responsive #top #wrap_all #header {
    position: fixed !important;
  	}
  	.responsive.html_mobile_menu_tablet.html_header_top #top #main {
        padding-top: 60px !important;
  	}
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.
    If you have any trouble disable your WP Rocket plugin and the Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression and enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files. then check again.
    Feel free to adjust to suit.
    I also notice that your revolution slider doesn’t show on page load, only after the page is scrolled or clicked, this is due to your WP Rocket plugin lazy load, you should add an exclusion for the slider or disable the WP Rocket lazy load option.

    Best regards,
    Mike

    May 28, 2025 at 10:45 pm #1484798
    TESLA

    DONE. Wonderful, this code is working!

    May 28, 2025 at 11:05 pm #1484800
    Mike

    Hi,
    Glad we were able to 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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Fixed Header /// mobile’ is closed to new replies.