Move Logo and Add Text - Support | Kriesi.at

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
September 7, 2022 at 11:20 pm #1364275

edgeofcinema
Participant

Hello,

My client wants to have the main navigation above the logo area, and I found an option to do that,

But they also want the logo justified left, with some text to the right of the logo.

How can I have it so the nav bar is above the logo, and the logo is right, then I need to add some text.

Thanks!
Here is a link to the site

Home

September 8, 2022 at 10:01 am #1364297
Ismael
Moderator
Hey edgeofcinema,

Thank you for the inquiry.

You can use this css code to align the logo to the left.
```
.html_header_top.html_logo_center .logo {
 left: 0;
 -webkit-transform: translate(-50%,0);
 -ms-transform: translate(-50%,0);
 transform: none;
}
```
To insert additional text beside the logo image, try to use this filter in the functions.php file.
```
add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub){
 $sub .= "";
 $sub .= get_bloginfo( 'name', 'display' );
 $sub .= "";
 $sub .= "";
 $sub .= get_bloginfo( 'description', 'display' );
 $sub .= "";
 return $sub;
}
```
You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

Best regards,
Ismael
September 8, 2022 at 3:30 pm #1364334

edgeofcinema
Participant

Do i need to make a child theme to add this?

September 8, 2022 at 5:07 pm #1364356

edgeofcinema
Participant

Ok so I made a child theme, and I tried adding your code to the functions.php file, but I didn’t see any text next to the logo. (see below code)

I also tried inserting the code ubove the // END ENQUEUE PARENT ACTION line, but that gave me a fatal error.

<?php
// Exit if accessed directly
if ( !defined( ‘ABSPATH’ ) ) exit;

// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED – Do not modify or remove comment markers above or below:

if ( !function_exists( ‘chld_thm_cfg_locale_css’ ) ):
function chld_thm_cfg_locale_css( $uri ){
if ( empty( $uri ) && is_rtl() && file_exists( get_template_directory() . ‘/rtl.css’ ) )
$uri = get_template_directory_uri() . ‘/rtl.css’;
return $uri;
}
endif;
add_filter( ‘locale_stylesheet_uri’, ‘chld_thm_cfg_locale_css’ );
// END ENQUEUE PARENT ACTION

add_filter(‘avf_logo_subtext’, ‘kriesi_logo_addition’);
function kriesi_logo_addition($sub){
$sub .= “”;
$sub .= get_bloginfo( ‘name’, ‘display’ );
$sub .= “”;
$sub .= “”;
$sub .= get_bloginfo( ‘description’, ‘display’ );
$sub .= “”;
return $sub;
}

September 8, 2022 at 5:07 pm #1364357

edgeofcinema
Participant

I was able to move the logo to the left though! https://emilyl41.sg-host.com/

September 8, 2022 at 5:57 pm #1364372

edgeofcinema
Participant

Also I did toggle the css compress setting, but it didn’t make a difference. Although I have noticed, after inserting the code, there is a blank space now to the right of the logo that is part of the clickable area around the logo now, so something is working, I just need to know how to get the text to show up there.

September 8, 2022 at 6:22 pm #1364373

edgeofcinema
Participant

I just put the text in as part of the logo, and that seems to look good.

September 9, 2022 at 8:19 am #1364397
Ismael
Moderator
Hey!

Thank you for the update.

The subtext is already there but it is right below the logo outside the header container. To adjust its position, please add this css code.
```
span.subtext.avia-standard-logo-sub {
 position: absolute;
 display: block;
 opacity: 1;
 top: 100px;
 left: 200px;
}
```
Regards,
Ismael
September 13, 2022 at 5:02 pm #1364941

edgeofcinema
Participant

Ok next question

I need to put a button into the logo area.

I saw information on how to do it Here https://kriesi.at/documentation/enfold/add-button-elements-to-your-header/#toggle-id-2

but this tutorial was only if you want the menu below the logo area.

My client has the logo area below the menu, and the logo is justified to the left.

How can I add a button on the right side of the logo area?

September 14, 2022 at 9:42 pm #1365051

Mike
Moderator

Hi,
Thank you for your patience, please follow the steps to add the header widget and button and then we can assist with css to align it to the right of the logo. I see your logo is quite large, do you plan to hide the button for tablet and below screens?
An admin login would probably also help.

Best regards,
Mike

September 19, 2022 at 6:48 pm #1365577

edgeofcinema
Participant

Hello, I went through the steps, but was not able to get a button to appear.

I was able to get text to appear in the blue section of the header, but since this was not my goal, reverted the site back to before I had added all the custom PHP and CSS.

I also noticed a new problem that has popped up since we started this thread.

Right now, when you shrink the width of the site to mobile view, the site title and tag line can be seen in orange text in the header.

How can I get this to go away?

September 20, 2022 at 9:19 am #1365652
Ismael
Moderator
Hi,

We created a new widget area called “Header” and added a text widget with the button row shortcode. We are not able to add the hook because the Appearance > Theme File Editor panel is not accessible.

You have to add this code in the functions.php file to insert the widget area in the header.
```
function ava_customization_header_widget_area() {
 dynamic_sidebar( 'header' );
}
add_action( 'ava_after_main_menu', 'ava_customization_header_widget_area' );
```
Thank you for your patience.

Best regards,
Ismael
September 26, 2022 at 6:57 pm #1366434

edgeofcinema
Participant

Ok I added it in. I found that the site-ground security plugin needs to be disabled in order to get the theme file editor back.

September 26, 2022 at 7:04 pm #1366440

edgeofcinema
Participant

Not sure if you saw this before,

I also noticed a new problem that has popped up since we started this thread.
Right now, when you shrink the width of the site to mobile view, the site title and tag line can be seen in orange text in the header.
How can I get this to go away?

Thanks!

September 27, 2022 at 12:37 am #1366465
Mike
Moderator
Hi,
Please try this css:
```
@media only screen and (max-width: 767px) { 
	.subtext.avia-standard-logo-sub span {
		display: none;
	}
}
```
After applying the css, please clear your browser cache and check.

Best regards,
Mike
September 28, 2022 at 7:54 pm #1366784

edgeofcinema
Participant

Thanks that fixed that!

September 28, 2022 at 8:03 pm #1366787

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Move Logo and Add Text’ is closed to new replies.