Full width logo in Enfold Theme - Support | Kriesi.at

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

Author

Posts
May 9, 2016 at 6:12 pm #629403

visaliaweb
Participant

Good Morning, l have search your forum, but can’t find this specific answer.

I have a client that wants their logo fullwidth. Please see this site http://visaliatile.com

To make this happen, l put the image in as a background image, works fine on pc, but not on mobile phone, l did put the image in the logo spot, still have had some space of both sides which the client doesn’t want. Please help.

May 9, 2016 at 6:13 pm #629406

Yigit
Keymaster

Hey visaliaweb!

Please upload your image as logo and then let us know. Alternatively, you can post admin login credentials here and we can apply the changes.

Cheers!
Yigit

May 9, 2016 at 6:32 pm #629422

visaliaweb
Participant

I took the image out of background and added it as a logo

May 10, 2016 at 4:51 pm #630088
Yigit
Keymaster
Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
```
.container.av-logo-container {
    padding: 0!important;
}
.logo img {
    width: 100%;
}
```
Best regards,
Yigit
May 10, 2016 at 6:07 pm #630160

visaliaweb
Participant

You are amazing, thank you, worked perfectly, may l make 1 suggestion, have the option in Enfold to add 2 logo’s, 1 desktop and 1 mobile.

May 10, 2016 at 9:18 pm #630244

Yigit
Keymaster

Hi!

You can post your request here – https://kriesi.at/support/enfold-feature-requests/ :)

Best regards,
Yigit

June 10, 2016 at 2:13 pm #646201

Blue_Bear
Participant

HI,

I would like to do the same but unfortunetly this css doesn’t work for me… It’s look like this :

Do I miss something ?

Thanks,

Clement

June 10, 2016 at 2:39 pm #646214

Vinay
Inactive Moderator

Hi,

@Blue_Bear Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

Best regards,
Vinay

June 10, 2016 at 2:43 pm #646218

Blue_Bear
Participant

HI,

Of course but you cannot acces to website I’ve set up a coming soon page. So I give you in the private section an acces to my website.

Thanks a lot !

June 10, 2016 at 3:38 pm #646248

Vinay
Inactive Moderator

Hi,

I tried to troubleshoot this issue but the login credentials you provided do not work for me. Would you mind checking once again and then send us working login credentials?

The user role for the account you send us should be set to ‘administrator’ so we can try to disable all plugins and add custom code (if necessary) to resolve the issue.

Best regards,
Vinay

June 10, 2016 at 3:59 pm #646256

Blue_Bear
Participant

Hi,

Oups my mistake, sorry for that…
Clement

June 10, 2016 at 6:30 pm #646297
Vinay
Inactive Moderator
Hi,

Thank you for the credentials, we have added the below css in child theme styles.

Please review the site now.
```
.logo, .logo img {
    width: 100% !important;
    height:auto;
}
```
Thank you for using Enfold :)

Best regards,
Vinay
June 10, 2016 at 7:21 pm #646310

Blue_Bear
Participant

Thanks a lot !

But do you know why I still have space on the right and on the left ? I try to play margin and padding but nothing works. And when I put the width of the .container.av-logo-container at 100% there is still space and the right.

Also, how can I shrink the logo when I scroll and the meenu becomes sticky ? Cause right now is not nice…

In addition, can I ask you here how to manage the color of the social button when the headear becomes sticky ?

Thanks again,

Clement

June 10, 2016 at 8:43 pm #646337
Vinay
Inactive Moderator
Hi,

To make the logo full width please select “Let logo and menu position adapt to browser window” in Enfold > Header > Header behavior

If that don’t work for you please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
```
.responsive #header_main .container.av-logo-container {
	width: 100%!important;
	max-width:100%!important;
	padding:0!important;
}
```
You can show a different logo when users scroll down but for that we need to make some changes in the theme settings.

Remove the current logo from Enfold > Logo and add it to Enfold > Header > Transparency options > Transparency Logo (This will be your main logo)

Add the logo which you want to show in Enfold > Logo

Login to admin and on the front page in the right sidebar layout options under the “Header visibility and transparency” select Transparent header.

let us know if you have any questions.

Best regards,
Vinay
June 12, 2016 at 5:44 pm #646976

Blue_Bear
Participant

Hi,

Thanks it’s working perfectly with “Let logo and menu position adapt to browser window” setting and the CSS. Thanks also for the logo it’s working.

But unfortunetly, the last point, make the social button more visible when you scroll and the header become sticky, ain(t working… DO I open a new thread ?

Thanks,

Clement

June 13, 2016 at 6:51 pm #647590
Yigit
Keymaster
Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
```
.header-scrolled .social_bookmarks li a {
    color: white;
}
```
Best regards,
Yigit
June 13, 2016 at 7:04 pm #647596

Blue_Bear
Participant

Once again you rock !
Thanks a lot enfold team !!
Clement
the topic can be close

June 13, 2016 at 7:51 pm #647605

Yigit
Keymaster

Hey!

You are welcome!
For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

Regards,
Yigit
Author

Posts

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

The topic ‘Full width logo in Enfold Theme’ is closed to new replies.