-
Posts
-
I just upgraded to Enfold 2.2. I deleted the old theme folder, extracted the new one. Since doing this, the site logo is displaying stretched when the site is viewed in any responsive mode under approx 1100px.
Any advice appreciated. I assume this is a bug in the updated theme.
Cheers,
JasonHey!
The logo stays 257x88px on any screen sizes. The container decreases on smaller screen sizes that’s why the menu is closer from the logo. You can add this on your custom.css or Quick CSS to decrease the logo size on smaller screens.
@media only screen and (min-width: 1005px) and (max-width: 1155px) { .logo, .logo a { max-width: 200px; margin-top: 5px; } }Regards,
IsmaelSorry, I may have misled you. As this is the production site for my business, I had to revert the theme to 2.1.
You can see in the screenshot I provided that the logo is clearly stretched.
Surely this can be reproduced elsewhere?
Hello!
Can you please create a test site then install the latest version of Enfold? Add this on your custom.css or Quick CSS:
.logo img { max-width: 257px; max-height: 88px; }Best regards,
IsmaelI just upgraded my test site to 2.2 and left it there so you can see the fault. tiperdev dot techcore dot com dot au.
I’d rather not put a custom css hack in place for what is clearly a theme bug. I thought you would be more responsive to someone reporting a problem like this?
Hey!
Which browser are you using? I checked your website on Chrome, Firefox and IE 10 on Win 7 and your looks fine on all browsers i checked
Best regards,
YigitPlease ensure you’re using the right URL. There are two in two different posts. It would be great if you allowed users to edit their old posts to solve problems like this.
If you view the later URL you will find it’s broken in both IE11 and Firefox 24.
Hey!
Please take a look at the screencast here http://www.screenr.com/JTZH
Best regards,
YigitEDIT: Firefox 24 screenshot http://i.imgur.com/Gckwmu6.jpg
Scroll back to the top of the page. Use a screen width above 768px and below 1024px. Immediately after the page loads, the logo stretches wider. I have verified on multiple PCs using multiple browsers.
Do you think I would have opened this thread if this wasn’t a legitimate bug? Why aren’t you taking this seriously?
Hi Jason!
In the future, put your URL’s in something like http://goo.gl/ . We answer anywhere from 30 to 60 posts a day individually and reading through a whole topic to pick out a url broken down to ” tiperdev dot techcore dot com dot au” is likely to get missed.
With that said, I’m seeing the issue but I’m unable to reproduce it on any of my client sites, dev sites or personal blog all running Enfold on version 2.2.
So the first thing to try is remove any customization, css and deactivate all plugins that are active including any drop ins like Jetpack.
What is happening is the logo is getting a defined width from some other outside code once you get to a tablet/laptop size screen. As far as I know there isn’t anything in the theme’s javascript that ever defines the width of the logo in pixel width which is why I suggest removing all outside variables.
Best regards,
DevinIf you had a stickied thread/new post notice with instructions, or auto-parser to do that with URLs, you may make your own lives easier and provide better support for your paying customers.
As you have not actually attempted to diagnose my problem at all (it has nothing to do with site plugins), I looked into it myself.
avia.js is adding a width parameter to the strong tag the site logo gets placed in. I have not debugged the function, but is occurring round line 224. For my site, the calculated value is 308px which is wrong, and stretches the logo. The function avia_responsive_menu is very different in 2.1 and does not exhibit this bug.
I would suggest you need to fix this bug in your base code with the next release of Enfold…
I’ll tag the topic for the rest of support as I’m still not actually getting the same width value added to the logos on any of the sites I work on or my dev sites.
So far this is the only topic I’ve seen with the issue as well so I’m at a loss for why you are getting it on the site.
Perhaps it is to do with the size of my logo image, or the number of top level nav items I have. Do your sample sites have a similar setup? The avia function I referred to seems to look at the width of the nav and logo before calculating a new width.
edit: to be clear, the value is dynamic, you will not find 308px anywhere in the code.
My guess is that it should only be shrinking the logo if there are too many nav items, but it’s been coded wrongly.
Hi!
Actually I wrote the function and added it to avia.js. The function will calculate the width of the menu items with paddings and without paddings and if the width of the menu items with paddings and the logo width exceeds the header container width it will try to shrink the paddings to a lower value. By going this way we can make sure that the logo is not overlapped by the menu items. However in some cases the reduced paddings are not enough and the menu items would still overlap the logo and my function then calculates the remaining space and changes the logo width to the calculated value.
That said I can’t reproduce the issue on my test servers ( http://www.screenr.com/kCZH ) and no other user reported a similar issue so far and I wonder if the issue only occurs with a certain setup (os/browser specific). I tested your website and the new Enfold update on my test servers with Firefox, Chrome, IE10 and 9 on Win8 and I didn’t notice a logo image distortion.
If you think it’s coded wrongly and you don’t want to use the new function open up avia.js and delete/comment out following code:
win.on("debouncedresize", adjust_menu_width); win.on('scroll', adjust_menu_width); adjust_menu_width();This will deactivate the menu item width and logo width calculation and my function won’t kick in. On the other hand you risk that the menu links may overlap the logo.
Cheers!
PeterHi Peter,
Thanks for the reply.
I am not keen to customise my install of Enfold, and I have specifically avoided doing it in the hope I would get good support.
The issue with my site only occurs at browser widths >~700px and <~1150px. Unfortunately this means the common browser size of 1024px shows a warped logo. If I resize the browser larger than this, the image snaps back to the correct width (ie 1280px is fine). It is reproducable in multiple browsers on multiple machines, so is not a browser/plugin issue.
Feel free to use my logo image to test. Maybe to reproduce you need to alter your top level nav to match mine.
I have a fairly large top level nav, and have woocommerce (I noticed some code relating to the shopping cart icon in the top nav).edit: Just to clarify — Is your code supposed to make the logo *larger*? Because that’s what it’s doing <1160px.
I would rather like to keep all of my files stock, but I can try a fix on my test site if you plan to include it in the next version of Enfold.
Cheers,
JasonHello!
Please create me an admin account and update your theme to v2.2. If you want to avoid that your website visitors see a stretched logo replace
win.on("debouncedresize", adjust_menu_width); win.on('scroll', adjust_menu_width); adjust_menu_width();with
/* win.on("debouncedresize", adjust_menu_width); win.on('scroll', adjust_menu_width); adjust_menu_width(); */and I’ll remove the comment sign when I start to debug the code.
Cheers!
PeterI’m not entirely comfortable giving login details to my site to a complete stranger… Is there another way you could reproduce this?
It occurs with all site plugins disabled, surely all you need to do is copy my top level nav items & use my site logo on any test site of yours.
Cheers,
JasonHey!
Please copy/paste the code from here: https://gist.github.com/InoPlugs/ff21a064c574fc154794 into your avia.js file. You can remove/delete the “old” code in avia.js
Cheers!
PeterTried applying your changes, no love :( You may want to check the tiperdev site to see if I applied them properly. Need some sleep now.
Hi!
I updated the instructions above. I think I forgot to mention some code changes and it’s better/safer when you replace the entire code in avia.js
Cheers!
PeterThank’s, thats a bit more idiot proof. Unfortunately that didn’t work. In fact, it introduced some other bugs.
Enfold 2.2 is trying to set the width on the image to 296px, but is not setting the height, resulting in the warping. My logo image is 300x91px. Under Enfold v2.1 this scales to 257x78px, because the image scales to the container size (.logo img { width:auto;height:auto; } in base.css).
When scrolling a small amount from the top of the page, the width stays fixed to 296px but the height shrinks, distorting the image massively.
It did fix the logo size changing when resizing the window width above and below 1160px.
tldr;
If you’re going to set the logo size with js, I think you need to set both dimensions, and remove the auto in base.css. Also you need to fix the behavior when scrolling.A question: Should my logo image be smaller?
Cheers,
JasonHello!
I checked the code and this is probably a side effect of the “css width” attribute which is calculated by the js function. I changed the code a bit ( https://gist.github.com/InoPlugs/ff21a064c574fc154794 ) and replaced
$('#header .logo,#header .logo a img').css('width',logo_width+"px");with
$('#header .logo,#header .logo a img').css({'max-width':logo_width+"px", 'width':'auto'});Now the browser should set the logo width automatically but the logo won’t overlap the items because of the max-width limitation
Regards,
PeterWorks perfectly. Thanks heaps.
Can you confirm this will be fixed in the next Enfold release?
Cheers,
Jason
- The topic ‘Enfold 2.2 breaks site logo image’ is closed to new replies.