sliding header image

Hi,

To answer both your questions at the same time: the slider needs to be full screen but if you add text above it then it will be pushed down. So edit header.php from the child theme and add what you need right above <?php sydney_slider_template(); ?>. We’ll see after that if you need some styling or something.

Thank you vladff.

I made a quick test and you are right. It pushes the picture down. I am thinking to put there the logo (or widget area) with .css and .php files. I don’t know how but i will check it out and i will inform you for further problem(s) of mine…

Hello vladff,

I have put the desired code above <?php sydney_slider_template(); ?> and it works 50% right. And when i mean half working you can check it out at this address: https://www.digitallifeage.com/cms/fashion/
The sticky menu when it goes down, the logo and the menu buttons are remaining in the first place where they were. They don’t follow the white little sticky bar…
Can you help me with this or direct me to some link so i can find a solution?
I attach you below the code i tweak together with the original:

original
—————-
<?php sydney_slider_template(); ?>

<header id=”masthead” class=”site-header” role=”banner”>
<div class=”header-wrap”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4 col-sm-8 col-xs-12″>
<?php if ( get_theme_mod(‘site_logo’) ) : ?>
” title=”<?php bloginfo(‘name’); ?>”><img class=”site-logo” src=”<?php echo esc_url(get_theme_mod(‘site_logo’)); ?>” alt=”<?php bloginfo(‘name’); ?>” />
<?php else : ?>
<h1 class=”site-title”>” rel=”home”><?php bloginfo( ‘name’ ); ?></h1>
<h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
<?php endif; ?>
</div>
<div class=”col-md-8 col-sm-4 col-xs-12″>
<div class=”btn-menu”></div>
<nav id=”mainnav” class=”mainnav” role=”navigation”>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘fallback_cb’ => ‘sydney_menu_fallback’ ) ); ?>
</nav><!– #site-navigation –>
</div>
</div>
</div>
</div>
</header><!– #masthead –>
<div class=”header-image”><div class=”overlay”></div></div>

Tweaked
—————
<div class=”header-wrap”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4 col-sm-8 col-xs-12″>
<?php if ( get_theme_mod(‘site_logo’) ) : ?>
” title=”<?php bloginfo(‘name’); ?>”><img class=”site-logo” src=”<?php echo esc_url(get_theme_mod(‘site_logo’)); ?>” alt=”<?php bloginfo(‘name’); ?>” />
<?php else : ?>
<h1 class=”site-title”>” rel=”home”><?php bloginfo( ‘name’ ); ?></h1>
<h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
<?php endif; ?>
</div>
<div class=”col-md-8 col-sm-4 col-xs-12″>
<div class=”btn-menu”></div>
<nav id=”mainnav” class=”mainnav” role=”navigation”>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘fallback_cb’ => ‘sydney_menu_fallback’ ) ); ?>
</nav><!– #site-navigation –>
</div>
</div>
</div>
</div>

<?php sydney_slider_template(); ?>

<header id=”masthead” class=”site-header” role=”banner”>

Thanks in advanced.

I just had a quick look. Note that <header> is the one that becomes sticky. You moved everything away from it.

before i sent you the above tweaked code i tried a couple other combinations and the result was having at first place two logos: one in the center that was not moving and the other to the left following the sticky bar…
If you are more familiar with php and css codes than me (i only know basic skills and tweaks) you can show me the way…

I can not figure out what must the solution be! I make a couple of combinations outside of the <?php sydney_slider_template(); ?> but it didn’t work…
I am sorry bothering you vladff but if you found anything i am all ears! This is for a client of mine and i am getting a little anxious…

Thank you anyway.

I don’t think you can achieve what you want while also keeping the menu bar sticky. It’s easy to add text above the slider, but then the menu bar will cover that text.

You can try something like this. Add this right above the slider template:

<div class="top-text">
  <div class="container">
        Your text here
  </div>
</div>

Then add this in your styles:

.top-text {
    padding: 120px 0 30px;
    background-color: #d8d8d8;
}

let me check it out…

i put at .css the kind of code you gave me:

.abovePic {
padding: 155px 0 30px;
background-color: #fff;
}

and at header i left only the div above <?php sydney_slider_template(); ?>:

<div class=”abovePic”>

</div>

It’s nice and it is the thing i wanted it. I will search it a little bit more because the white background behind logo and main buttons is covering the main header image: (https://www.digitallifeage.com/cms/fashion/) If i will find it hard i will post you…

Again, a big thanks vladff for your replies!