Larger Logo and Center - Support | Kriesi.at

Tagged: center logo, custom logo, logo

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

Author

Posts
January 14, 2014 at 9:15 pm #209686

apower84
Participant

Hi,

How can i use a larger logo i want to try an : 250px x 250px and have it in the center.
What CSS modifications do i need to change?

January 14, 2014 at 9:18 pm #209688
Yigit
Keymaster
Hi Mattias!

Please refer to this post and set header height to 250 https://kriesi.at/support/topic/change-logo-image-for-scrolled-header/#post-188003
and upload your 250x250px logo in Enfold theme options then add following code to Quick CSS in Enfold theme options under Styling tab center the logo
```
div .logo { left: 45%; }
```
You may need to adjust it to center it perfectly

Best regards,
Yigit
January 14, 2014 at 9:38 pm #209703
apower84
Participant
Hi Yigit

The center part work :-)

I tryed to change this value but nothing happed.
wp-content\themes\enfold\js folder and open avia.js file
```
el_height       = $(elements).filter(':first').height(),
and change it to

 el_height       = 200,
```
January 14, 2014 at 9:40 pm #209705

Yigit
Keymaster

Hey!

Can you post the link to your website?

Regards,
Yigit

January 14, 2014 at 9:41 pm #209706

apower84
Participant

This reply has been marked as private.

January 14, 2014 at 9:44 pm #209712
Yigit
Keymaster
Hi!

Please add following code to Quick CSS as well
```
.bottom_nav_header.social_header #header_main .container {
height: 250px; }
```
I thought you were using a fixed header :)

Cheers!
Yigit
January 14, 2014 at 9:46 pm #209714

apower84
Participant

Thank you Yigit it works!

But what CSS do i need to add for it to center when its gets resposive?

January 14, 2014 at 9:50 pm #209720
Yigit
Keymaster
Hey!

Following code should do it
```
@media only screen and (min-width: 768px) and (max-width: 989px) {
div .logo { left: 35%; }}
@media only screen and (max-width: 767px) {
div .logo { left: 0; }}
```
Regards,
Yigit
January 14, 2014 at 10:02 pm #209735

apower84
Participant

Thank you Yigit!

Last Q for today.

How can i change the white background for the menu so i goes all the way?

January 14, 2014 at 10:15 pm #209736
Yigit
Keymaster
Hi!

Please add following code to Quick CSS as well
```
#header_main_alternate { background-color: #333333; }
```
Cheers!
Yigit
February 18, 2014 at 9:18 pm #225738

apower84
Participant

Hi,

Im trying to center my logo so far so good but its small again.
I upload a logo with the size 340 x 156, what css do i need to change / add?

February 18, 2014 at 9:18 pm #225739

apower84
Participant

This reply has been marked as private.

February 19, 2014 at 12:01 am #225819
Yigit
Keymaster
Hi!

Please add following code to Quick CSS as well
```
.bottom_nav_header.social_header #header_main .container {
height: 166px; }
```
Regards,
Yigit
February 19, 2014 at 8:28 am #226006

apower84
Participant

Hi!

The logo just got some height and not any width, please have a look again.

//M

February 19, 2014 at 9:15 am #226039

Ismael
Moderator

Hey!

Please upload the logo again then select the Full size before you click “Add image as logo”.

Best regards,
Ismael

February 19, 2014 at 9:26 am #226050

apower84
Participant

Thank you for great support and a really great theme!

//M

February 19, 2014 at 9:53 am #226060

apower84
Participant

Just one more thing it’s too much space between logo and top and logo and menu.
How can i reduce this spacing?
Then there is border over the logo that I want to remove.

//M

February 19, 2014 at 10:11 am #226068
apower84
Participant
Ah cool i just adjust the px and the logo will adjust in size. :-)
```
.bottom_nav_header.social_header #header_main .container {
height: 166px; }
```
But i still have the border and spacing problem left.

//M
February 19, 2014 at 2:26 pm #226178
Yigit
Keymaster
Hey!

Please add following code to Quick CSS as well
```
#header_main .container_wrap { border-top-style: none; }
.logo img { padding: 0; }
```
There is only 5px of padding on top and bottom. You should edit your logo image and remove extra spaces

Best regards,
Yigit
February 19, 2014 at 2:51 pm #226187
apower84
Participant
The border, padding and top menu is still there somehow please use google chrome browser and you will se it.
Think its something about : class”container” or class”sub_menu” and id”header_meta´”

My CSS so far:
```
/* Font size */
body { font-size: 14px;}

/* Disable Enfold Responsive menu button  */
.main_menu .mobileMenu { display:none !important; }

/* Disable top menu */ 
 #header_meta { display: none !important;}

/* Disable top social bookmarks */ 
#top .social_bookmarks { display: none;}

/* Disable logout link in menu */ 
.page-item-logout {display:none;}

.bottom_nav_header.social_header #header_main .container {height: 140px; }

#header_main .container_wrap { border-top-style: none; }
```
//M
February 19, 2014 at 2:57 pm #226192
Yigit
Keymaster
Hey!

I am using Chrome. I see that padding on logo image was removed. There is no padding around it. You should edit your logo image file
Please use following code to remove top border
```
#header_main { border-top: none!important; }
```
Cheers!
Yigit
February 19, 2014 at 3:07 pm #226197
apower84
Participant
Please the image, Red arrow points at the problem.

I can remove the border with your code but the spacing is still there “Only in Google Chrome Browser”

//M
- This reply was modified 10 years, 8 months ago by apower84. Reason: added text
February 19, 2014 at 3:19 pm #226213
Yigit
Keymaster
Hey!

Code is not being applied. Please try adding it to the bottom of Style.css file of your child theme
EDIT: This is how i see your website http://i.imgur.com/4wY26Kt.jpg

Best regards,
Yigit
- This reply was modified 10 years, 8 months ago by Yigit.
February 19, 2014 at 3:39 pm #226229

apower84
Participant

Added the css changes and made the logo height 70px but still got the problem, please see image.
Only in Google Chrome Browser, do you see it?

//M

February 19, 2014 at 4:00 pm #226242

apower84
Participant

Now eveything is ok it was something with my chrome brower “strange”

Thank you for your great support!
Author

Posts