Header Customization

@fitzerland: Hi, could you please post here a link to your website so I could view it to help you? The 1.1.0 update contains only some changes in the translation files (added Italian translation and made some changes in the German translation), so if you can see some error, most probably it is a server issue not relating with the theme.

Best regards,
Tomas Toman

Hi thanks for replying.. I would really like my theme to look like the demo one, just different content.

the link is https://ndlovuenkulu.co.za

Regards
Fitzerland

If possible can you pls also chect the contact pop up form at the bottom rigt of the page, i would like to move it further to the right, just after the page container…here is my email address [email protected] should you need the login details

@fitzerland: Hi, to change the position of the pop up contact form, please insert the following CSS into “Theme Options > Other Settings > Custom CSS”:

#wrapper #vc_control {right: 200px;}

#wrapper #vc_widget {right: 100px;}

The first line is for the “Contact” button, the second one for the pop up form (just change both values according to your needs).

To reduce the height of the header area, please use the following Custom CSS:

body .header-content {padding-top: 0; padding-bottom: 0;}

Best regards,
Tomas Toman

Perfect, Thank you are the best… One other thing, how do i add the slider on the header without removing the logo. A slider as a header background maybe..? or on the right side of the logo.

The header slideshow is supported only in the Premium version.

In the Free version, I can recommend you to install the Meta Slider plugin and create a child theme. Just copy the original “header.php” template into your child theme’s folder, search here for the following code:

<div class="header-image"><img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" /></div>

and modify it in this way to display a slideshow at the place of the header image:

<div class="header-image"><?php echo do_shortcode('[metaslider id=123]'); // replace 123 with your slideshow ID ?></div>

Best regards,
Tomas Toman

Thaks for a quick reply….I would also like to exclude the contact widget just on the contact page, but have it on all the other pages.. is that possible?

I edited this code in the child theme and nothing changed;

<?php if ( get_header_image() != ” ) { ?>
<div class=”header-image”><?php echo do_shortcode(‘[metaslider id=67]’); ?></div>
<?php } ?>

Please check the settings panel of the plugin which you use for displaying the contact widget. If there is no such option, the following CSS should hide it on all pages except your “Contact us” page:

#vc_control, #vc_widget {display: none !important;}
html .page-id-105 #vc_control, html .page-id-105 #vc_widget {display: block !important;}

Best regards,
Tomas Toman

If you have edited only the first appearance of the <div class="header-image"> element, the slideshow will be displayed only on your homepage. Just under it, there is also the code which generates the header image on all other pages:

<?php if ( get_header_image() != '' && $maidenhair_options_db['maidenhair_display_header_image'] != 'Only on Homepage' ) { ?>
    <div class="header-image"><img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" /></div>
<?php } ?>

Just edit this code in the same way to display the slideshow on all pages.

Best regards,
Tomas Toman

Ok, I created the child theme, did as u said;
In the Free version, I can recommend you to install the Meta Slider plugin and create a child theme. Just copy the original “header.php” template into your child theme’s folder, search here for the following code:

<div class=”header-image”><img src=”<?php header_image(); ?>” alt=”<?php bloginfo( ‘name’ ); ?>” /></div>

and modify it in this way to display a slideshow at the place of the header image:

<div class=”header-image”><?php echo do_shortcode(‘[metaslider id=123]’); // replace 123 with your slideshow ID ?></div>

but now the slider is not where i want it to be(obove the 2nd menu, next to the logo) or as a background where the logo is (above the 2nd menu). right now it is below the menu.. i need it between the 2 menus.. and most of the things are re-arranged since i used the child theme.. like my background no longer shows..

and how do i check for the page ID again?

my url is https://ndlovuenkulu.co.za/

Thanks in advance.

The background, menus and header image settings are saved separately for each theme, so once you activate a child theme, then you will need to set them again for the child theme.

To check for the page ID, please follow these steps.

To display the header slideshow next to the logo, please search for the following code in “header.php”:

<div class="header-content">

Just under it, place the following:

<div class="header-slider"><?php echo do_shortcode('[metaslider id=67]'); ?></div>

Then, you will need to add some custom CSS to style the slideshow:

.header-slider {position: absolute; top: 0; left: 0; z-index: -1;}

(change the values “top” and “left” to get the slideshow to the desired location – maybe you will need to add also some additional CSS properties to style it according to your needs).

Best regards,
Tomas Toman

Hi, I put the code
Just under it, place the following:

<div class=”header-slider”><?php echo do_shortcode(‘[metaslider id=67]’); ?></div>

then i could see the slider in that area I wanted. but now when I add this code
Then, you will need to add some custom CSS to style the slideshow:

.header-slider {position: absolute; top: 0; left: 0; z-index: -1;}

the slider does not show..

Regards

Hi,

if the slider works well for you without the custom CSS, you can completely delete it. I posted it to show you how it could be possible to move the slideshow at the desired place in case that you are not satisfied how it is displayed by default. Or, please try to delete only the z-index: -1; declaration.

Best regards,
Tomas Toman