themes – Webpage first loads the main section of the page and then the header?
I have a problem with my new page https://escape-boat-dubrovnik.com/.
So a webpage first loads the main content of the page and then heard of the page with a slider and menu?
I make this site in WordPress and using the lightspeed cache plugin and I make a custom one-page theme.
Is anyone know how to fix this?
This is my header.php file
<html <?php language_attributes(); ?>>
<head>
<title><?php bloginfo( 'name' ); wp_title(); ?></title>
<meta name="description" content="<?php bloginfo( 'description' ); ?>">
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php if( is_singular() && pings_open( get_queried_object() ) ): ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<?php endif; ?>
<?php wp_head(); ?>
</head>
this is index.php
<!--HEADER START-->
E S C A P E
<!--Nav Links-->
<div class="collapse navbar-collapse" id="megaone">
<?php
wp_nav_menu( array(
'theme_location' => 'primary_menu',
'depth' => 1,
'menu_class' => 'navbar-nav ml-auto',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</div>
<!--Side Menu Button-->
<a href="javascript:void(0)" class="sidemenu_btn" id="sidemenu_toggle">
<span></span>
<span></span>
<span></span>
</a>
</div>
</nav>
<!--Side Nav-->
<div class="side-menu hidden">
<div class="inner-wrapper">
<span class="btn-close" id="btn_sideNavClose"><i></i><i></i></span>
<nav class="side-nav w-100">
<?php
wp_nav_menu( array(
'theme_location' => 'footer_menu',
'depth' => 1,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</nav>
<div class="side-footer w-100">
<ul class="social-icons-simple">
<li><a class="facebook-text-hvr" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="instagram-text-hvr" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
<li><a class="twitter-text-hvr" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
</ul>
<p>© <?php echo date('Y') . " "; ?> ESCAPE - DUBROVNIK. Made by <a href="https://mp-web.hr">MP WEB</a></p>
</div>
</div>
</div>
<a id="close_side_menu" href="javascript:void(0);"></a>
<!-- End side menu -->
ESCAPE
CONTACT US
Book now and
sea Dubrovnik from our view.
Book
</div>
</li>
<!-- SLIDE 2 -->
<li data-index="rs-02" data-transition="fade" data-slotamount="default" data-easein="Power100.easeIn" data-easeout="Power100.easeOut" data-masterspeed="2000" data-fsmasterspeed="1500" data-param1="02">
<!-- MAIN IMAGE -->
<img src="/wp-content/uploads/2022/04/Escape3-scaled.jpeg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<div class="bg-overlay bg-black opacity-4"></div>
<!-- LAYER NR. 1 -->
<div class="tp-caption tp-resizeme"
data-x="['right','right','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-40','-40','-35','-35']"
data-width="none" data-height="none" data-type="text"
data-textAlign="['center','center','center','center']"
data-responsive_offset="on" data-start="1000"
data-frames="[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]">
<h2 class="text-capitalize font-xlight whitecolor heading-title-small">FULL OR HALF DAY TOUR</h2>
</div>
<!-- LAYER NR. 2 -->
<div class="tp-caption tp-resizeme"
data-x="['right','right','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['20','20','20','20']"
data-width="none" data-height="none" data-type="text"
data-textAlign="['center','center','center','center']"
data-responsive_offset="on" data-start="1000"
data-frames="[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]">
<h1 class="text-capitalize font-xlight defaultcolor-slider heading-title-large">ELAPHITE ISLANDS</h1>
</div>
<!-- LAYER NR. 3 -->
<div class="tp-caption tp-resizeme"
data-x="['right','right','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['95','95','90','90']"
data-width="none" data-height="none" data-type="text"
data-textAlign="['right','right','center','center']"
data-responsive_offset="on" data-start="1500"
data-frames="[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":2000,"to":"o:1;","delay":1500,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]">
<p class="text-capitalize font-xlight whitecolor">Visit islands Lopud, Koločep or Šipan.<br/></p>
</div>
<!-- LAYER NR. 4 -->
<div class="tp-caption tp-resizeme"
data-x="['right','right','center','center']" data-hoffset="['0','0','0','15']"
data-y="['middle','middle','middle','middle']" data-voffset="['170','170','160','170']"
data-width="none" data-height="none" data-whitespace="nowrap" data-type="text"
data-textAlign="['center','center','center','center']"
data-responsive_offset="on" data-start="2000"
data-frames="[{"from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","speed":1500,"to":"o:1;","delay":2000,"ease":"Power4.easeInOut"},{"delay":"wait","speed":1000,"to":"y:[100%];","mask":"x:inherit;y:inherit;s:inherit;e:inherit;","ease":"Power2.easeInOut"}]">
<a href="#service" class="btn white-tran-blue-btn slider-btn">Find more</a>
</div>
</li>
<!-- SLIDE 3 -->
<li data-index="rs-03" data-transition="fade" data-slotamount="default" data-easein="Power100.easeIn" data-easeout="Power100.easeOut" data-masterspeed="2000" data-fsmasterspeed="1500" data-param1="03">
<!-- MAIN IMAGE -->
<img src="/wp-content/uploads/2022/04/Escape-1-scaled.jpeg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
<div class="bg-overlay bg-black opacity-4"></div>
<div class="tp-caption tp-resizeme"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['-55','-30','-35','-35']"
data-whitespace="nowrap" data-responsive_offset="on"
data-width="['none','none','none','none']" data-type="text"
data-textalign="['center','center','center','center']"
data-transform_idle="o:1;"
data-transform_in="x:-50px;opacity:0;s:2000;e:Power3.easeOut;"
data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;"
data-start="1000" data-splitin="none" data-splitout="none">
<h2 class="text-capitalize font-xlight whitecolor heading-title-small">SUNSET TOUR</h2>
</div>
<div class="tp-caption tp-resizeme"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['0','20','20','20']"
data-whitespace="nowrap" data-responsive_offset="on"
data-width="['none','none','none','none']" data-type="text"
data-textalign="['center','center','center','center']" data-fontsize="['48','48','20','26']"
data-transform_idle="o:1;"
data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;"
data-transform_out="s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
data-start="900" data-splitin="none" data-splitout="none">
<h1 class="text-capitalize font-xlight defaultcolor-slider heading-title-large">PANORAMA VIEW OF DUBROVNIK</h1>
</div>
<div class="tp-caption tp-resizeme"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['70','800','90','90']"
data-whitespace="nowrap" data-responsive_offset="on"
data-width="['none','none','none','none']" data-type="text"
data-textalign="['center','center','center','center']" data-fontsize="['16','16','16','16']"
data-transform_idle="o:1;"
data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:2;sY:2;skX:0;skY:0;opacity:0;s:1000;e:Power2.easeOut;"
data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;"
data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
data-start="1600" data-splitin="none" data-splitout="none">
<p class="font-light text-capitalize whitecolor">Panorama view of Old Town<br> and island Lokrum</p>
</div>
<div class="tp-caption tp-resizeme"
data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
data-y="['middle','middle','middle','middle']" data-voffset="['150','160','160','170']"
data-width="['500','500','500','500']" data-textalign="['center','center','center','center']" data-type="text"
data-whitespace="nowrap" data-transform_idle="o:1;" data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:1500;e:Power4.easeInOut;" data-transform_out="s:900;e:Power2.easeInOut;s:900;e:Power2.easeInOut;" data-start="1800" data-splitin="none" data-splitout="none" data-responsive_offset="on">
<a href="#service" class="btn white-tran-blue-btn slider-btn">See more</a>
</div>
</li>
</ul>
</div>
</div>
<!--svg id="svg-wave" preserveAspectRatio="xMidYMax meet" class="svg-separator sep1" viewBox="0 0 1600 100" style="" data-height="100">
<path class="" style="opacity: 1;fill: #ffffff;" d="M1040,56c0.5,0,1,0,1.6,0c-16.6-8.9-36.4-15.7-66.4-15.7c-56,0-76.8,23.7-106.9,41C881.1,89.3,895.6,96,920,96
C979.5,96,980,56,1040,56z”>
Leave an answer