Cannot get transparent header to work

Hi,
Glad to hear this helped, for mobile you may want to use this:

@media only screen and (max-width: 767px) { 
	#top.home .n2-ss-no-bga-fixed {
    top: -130px;
}
}

to make the mobile header background header transparent on first load, try this:

@media only screen and (max-width: 989px) {
.html_mobile_menu_tablet #top #wrap_all #header.av_header_transparency {
    background-color: transparent;
}
}

on scroll the header will turn black, if you want it to stay transparent use this instead:

@media only screen and (max-width: 989px) {
.html_mobile_menu_tablet #top #wrap_all #header.av_header_transparency,#header.header_color .header_bg {
    background-color: transparent;
}
}

to delay the header by 8 seconds (after your splash screen) Try adding this code to the end of your functions.php file in Appearance ▸ Editor:

function delay_header() { ?>
    <script>
(function($) {
	$("#header").css({'opacity':'0'});
	setTimeout(function(){
	$("#header").css({'opacity':'1'});
	},8000);
}(jQuery)); 
</script>
    <?php
}
add_action('wp_footer', 'delay_header');

to move your menu items up try this:

#top #header_main #av-burger-menu-ul {
    vertical-align: top;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks our responses did cross, instead of adding more to achieve this lets set the header with these settings, I un-checked Enfold Theme Options ▸ Header ▸ Header behavior ▸ Shrinking Header and changed Enfold Theme Options ▸ Header ▸ Header Layout ▸ Header Size ▸ custom pixel value of 46px, which was the size after scroll. Please check.

Best regards,
Mike

Hi,
I changed the script to this:

function delay_header() { ?>
    <script>
(function($) {
	var width = $(window).width()
	if ((width >= 768)) {
	$("#header").css({'opacity':'0'});
	setTimeout(function(){
	$("#header").css({'opacity':'1'});
	},8000);
	} else {}
}(jQuery)); 
</script>
    <?php
}
add_action('wp_footer', 'delay_header');

please clear your browser cache and check.

Best regards,
Mike

Hi,
the media query @media only screen and (max-width: 989px) { says that this rule will only work below 989px, I don’t recall why were doing that but to have the transparent header for all screen sizes please remove it and the last braket like this:

.html_mobile_menu_tablet #top #wrap_all #header.av_header_transparency,
#header.header_color .header_bg {
    background-color: transparent;
}

Best regards,
Mike

Hi,
Please try this:

@media only screen and (max-width: 767px) { 
.responsive #top .logo,.responsive .logo img { 
	width: 100%; 
	margin: auto;
}
}

Best regards,
Mike

Hi,

Thank you for the update.

In the Enfold > Advanced Styling , the font size of the active Main Menu Links was set to to 26px. We have reset it back to default, which is 18px.

Best regards,
Ismael

Hi Rob,

No problem! Thank you for recommending the theme and for the continued support. Please let us know in a different thread if you need anything else.

Have nice day.

Best regards,
Ismael