Additional picture besides navigation possible?

[ralphw]

Hello,

I would like to show a simple picture to the right of the navigation in desktop view (Integrity stack).

The picture should be displayed above the mobile button in the mobile view / smartphone.

Is there a solution?

Regards,

Ralph

[jade]

Hi Ralph,

That is possible through some customization using the child theme.

Please check this related thread:

Header and footer customization

Hope this helps.

[ralphw]

Hi Jade,

thanks for your help. Just to be safe: I want to show an additional picture to the right of the navigation. The normal logo (on the left) should not be replaced.

The suggested solution seems to solve another problem, or am I wrong?

How can I proceed?

Regards,

Ralph

[lely]

Hi Ralph,

Please try this. First please install a child theme.

The template that display the navigation is this file:
\wp-content\themes\x\framework\legacy\cranium\headers\views\global\_navbar.php
Try to copy that file on your child theme on the same location path:
\wp-content\themes\x-child\framework\legacy\cranium\headers\views\global\_navbar.php

You might need to create the entire folder location on the child theme.
Open the copied file, at line 45 and 46, you can see this part:

<?php x_get_view( 'global', '_brand' ); ?>
<?php x_get_view( 'global', '_nav', 'primary' ); ?>

After that line add the image you want to add after the primary navigation.

Hope this helps.

[ralphw]

Thank you.

The image will now be displayed, but to the right of the logo (which is displayed left). I want the image to appear to the right of the navigation.

Regards,

Ralph

[Prasant]

Hello Ralph,

Thanks for updating the thread.

I see you have added the image code. Please add a class name to image. For example:

<img src="path-to-image" class="haase-web-header-image">

After that add following CSS under X > Theme Options > CSS:

.haase-web-header-image {
    position: absolute;
    right: 0;
    width: 15%;
}

You can change the class name as per your requirement.

Thanks.

[ralphw]

Thank you for your help.

This works great for desktops and with CSS customization the image will be shown left besides the hamburger button on smartphones.

Unfortunately, the space for logo, picture and hamburger button next to each other in the header is very limited.

Is it possible to increase the height of the header on smartphones and then place the image above the hamburger button?

Regards,

Ralph

[ruenel]

Hello Ralf,

To resolve your issue, please update the css by using this code instead:

.haase-web-header-image {
    padding-top: 22px;
}

And then update the code in the template too:

<?php x_get_view( 'global', '_brand' ); ?>
<div class="right">
  <img src="../../../../../../../../../bild_rechts.jpg" class="haase-web-header-image">
</div>  
<?php x_get_view( 'global', '_nav', 'primary' ); ?>

By the way, please use an absolute image url. At the moment you are using relative path. It will give you problems later on.

Please let us know how it goes.

[ralphw]

Thank you for your help. The image is now displayed below the Hamburger Button. Is it possible to display the image above the Hamburger Button and aligned to the right?

Regards,

Ralph

[friech]

Hi Ralph,

@rweigmann

Is it possible to display the image above the Hamburger Button and aligned to the right?

In that case, please add your image HTML code, before the line <?php x_get_view( 'global', '_brand' ); ?>

Then add this to Theme Options > CSS

.haase-web-header-image {
	float: right;
}

Hope it helps,
Cheers!