-
Posts
-
I am want to have a larger logo but I also want the theme to function properly.
I have entered the following code to make the logo larger and to bring the slider down a bit (based on what I found in other threads):
.logo, .logo a, .logo a img {
width: 232px;
height: 116px;
}
#header_main .container, .main_menu ul:first-child > li > a {
height: 120px !important;
line-height: 120px !important;
}
.fixed_header #main {
padding-top: 120px;
}
However, there are 2 major problems:
1) The fixed header does not resize to a smaller size when one scrolls down
2) The bottom of the logo gets cut off when you reduce the browser’s window size or view it on a cell phone
Please help me with this… it seems fairly important because not everyone’s logo is going to look good at a small size.
Here’s a link to my site (never mind the horribly fuzzy logo):
Hoping this might help you guys…
I don’t know for sure, but I think I found someone else’s site that uses this theme with a slightly bigger logo and it works properly in the ways I’m having trouble with.
http://50.116.98.244/~service/
And here’s a link to his post on the forum… he asks the same questions I do, although the only answer is in regards to the slider position. But either way, it seems like he figured out the rest on his own… so it must be possible.
https://kriesi.at/support/topic/problem-with-header-logo-and-menu
Hi tacoverde,
When you use !important after css, it forces that css to take effect above all else. So when you added that to your header height, it forces the header to stay the same size even when scrolling down.
Just adding a larger logo means you shouldn’t have to use any css to adjust the logo at all as the header should resize automatically. So all you really need is the:
.fixed_header #main {
padding-top: 120px;
}from the other site you see the same effect on, you can look at the css they used here: http://50.116.98.244/~service/wp-content/uploads/dynamic_avia/casa_blanca.css?ver=1
Regards,
Devin
Thanks for replying :) …
So I got rid of all the other css except the one you mentioned, and the header resized my logo to a small logo (not 116 height)…
I’m a total beginner, so looking at the css of that other guys website is kinda crazy! I just know from searching the Enfold forum that a couple other people have asked how to make their logo bigger and they were given some custom css. The following link is for a guy who wanted his logo wider:
https://kriesi.at/support/topic/what-do-i-need-to-adjust-to-make-my-logo-bigger
And this link is a thread from the guy who owns the website I used as an example above:
https://kriesi.at/support/topic/problem-with-header-logo-and-menu
I tried using the padding css that you mentioned and then adding the “logo size” css:
.logo, .logo a, .logo a img {
width: 232px;
height: 116px;
}
And what happens is that I get the size logo I want, but it drops down out of the header. However, for now I took out the “logo size” css so that you could check out how it has resized my logo to a small logo…
Hi,
Your logo is 231×116 , however it is being displayed shrunken at 155×88 (this is why the logo is fuzzy. Your options are (if size the way you see it on page now is ok with you, then you would need to use a photo editor to resize your logo to 155×88 and reupload it.
If you want to make room and display your logo in its full size. But first here, http://i.imgur.com/lPpDOIw.png, install this size logo , I made it 155×88 and see how it looks, it will no longer be fuzzy
Thanks,
Nick
Please, por favor!!!
I do not care about the fuzzy logo, that is not what I asked…. I’m sorry to sound frustrated, but it’s the truth. I have a fuzzy logo because my graphic designer sent me a logo that is originally 200 x 100, but it was too small! So I enlarged it, and now it is fuzzy. I will ask her to make me a non fuzzy logo in a larger size. But only once I find out (from you guys) if it is possible to have a large logo and have the site function in the 2 ways that I mentioned above (please read well before responding).
Please, let me know how I can have a larger logo than the specified 200 x 100 and still have the header shrink as I scroll down and also to look normal (not get cut off) when in mobile view.
Hi,
Anything is possible. Can even have the logo become even larger than it initially is instead of becoming smaller. Not an expert on what’s normal, but if you want to tell me what size you will have initial logo at and what size you want it to shrink to, I can give you the code that will do it.
strong.logo img, #header_main .container, .main_menu ul:first-child > li a {
height: 116px !important;
line-height: 116px !important;
}Try this. add it to your /css/custom.css or to Quick CSS located in Enfold > Layout (Theme Options) … the text area at the bottom of that page
Thanks,
Nick
Ok, still not sure that you understand what I’m trying to do.
My logo is 231 x 116, I want it to display that way (not smaller). I like how the fixed header in Enfold is designed; the logo shrinks as the reader scrolls down the page. But, when I put my larger logo in, it doesn’t do that anymore. Also, the larger logo gets cut off (you can’t see the bottom half) when it’s viewed on a mobile phone.
… do I make sense?
Hi,
Please open up /js/avia.js and find line 767 that looks like
el_height = $(elements).filter(':first').height(),and change it to look like
el_height = 116,You also have to take out any css modifications you’ve made that sets the size of your image somewhere else.
*make a text file where you keep track of files and line numbers that you are changing so that way you have a record for yourself of all your customizations.
Thanks,
Nick
Great… where do I find /js/avia.js ?
Sorry, I’m a beginner. I tried to look for it in WordPress under Appearance/Editor, but I couldn’t find it.
Yes, you need to use ftp to download/update the file. Connect your ftp client to your server and navigate to wp-content/themes/enfold/js. There you’ll find avia.js. Download the file, edit it and upload it again (overwrite the old file).
- The topic ‘Large Logo causes problems with fixed header and mobile view’ is closed to new replies.