46 replies · opened Aug 2, 2017
Hello, please I need your help for something
I love the design of the index one page header menu
when its on lg and md its amazing
but when it goes on sm or xs, the header just appears not on very bottom but in center of page, the nicest way to appear would be on very top of the screen only on sm and xs, how can I make that change please ?
Thanks
Best regards
Mike
Hello, any solution please ?
Hello,
Thank You so much for your Patience!
We have tried checking out your Headers o Mobile Devices, however everything appears to be working as expected. Can you please provide us with a Screenshot of the Issue so that we can check out the exact error and provide you with more assistance for this.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
sorry I gave you the wrong link, please I beg you can you check this today I dont want to wait more to upload it, as you can see on mobile version you have the top bar, then the rotating image, then the menu, but I want to have the top bar, the menu, and then the rotating image on tablets and mobile
thank you very much !!!
ps I also see that on tablet mode the menu doesnt appear on the loading page but you have to scroll down to see it, I think it will be fixed automatically after we put the menu on top on tablet mode ? I will upload screenshots
last thing as well I see that the top bar when we scroll we see the lines its not very sexy I also post screenshot in five minuts
thanks a lot guys !!!
so on these screenshots you see the menu is under the video/image and I want it to be OVER it
so on these screenshots you see the menu is under the video/image and I want it to be OVER it
on these screenshots you see the menu doesnt appear on the main screen you have to scroll down for it to appear, but I think when we will put in on top (previous question) the problem will be fixeed maybe ?
and on this screenshot you see that when you scroll a little bit, the top bar shows the under line, its not terrible but maybe it can be fixed ? thanks a lot have a great week end guys !!
also the top bar on mobile mode is not alligned on same line
Last but not least :
I have a part of my page I would like it to display normally in the container class, and only on visible-xs to display in container-full
when I make it like this it doesnt work please
<div class="visible-lg visible-md visible-sm" "container clearfix"></div>
<div class="visible-xs" "container-full clearfix"></div>Hello,
Thanks for your Patience!
We have just checked out your Website and since the Header is placed below the Slider Area it appears in the middle of the screen according to the Height of the Slider. This isn't an issue and actually works the way as it should since the Header is displayed according to the Codes o the Page and it is not really recommended and also it will require many Custom Codes to shift the place of the Menu and also affect the performance of the Page.
Please use the following code:
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
and what about the top bar please ?? Please can you answer today I beg you
and since we wont change how the menu displays, on tablet mode when I scroll from video to first section it doesnt go on the right place please check the index and click on the arrow on bottom of video
I am sorry but I really need the header on tablet and mobile to be over the video..... Please can you help me with that ? The whole website is finished Ive been working on it for one month and a half, only this is missing..
ps: the
<div class="visible-lg visible-md visible-sm container clearfix"></div>
<div class="visible-xs container-full clearfix"></div>
doesnt work
I put it on the timeline blog and it messes up the whole way the lg ms and sm blog displays
screenshot
line 209 of page blog
the top bar problem is fixed !
I just need please to fix this :
line 209 of the blog your solution for the container in full width only on xs mode did not work unluckily, please can you check ? I attached previously a screenshot
also I really need to make the menu appear on top of video on tablet and mobiles please, can you help ?
Currently since its not the case, on md resolution (tablets) the menu wont display, one needs to scroll down to make it appear, and also when on this tablet mode you click on the down array to go in the right section it goes under the menu instead of displaying the whole menu on top, please can you help one way or another please ?
Thanks, after these problems are fixed you wont hear from me for at least two years :D haha good luck for everything guys you rock
PS: the url has changed, I already uploaded the new version I couldnt wait no more but please find it here : www.eden-boites.com
I also would like to desactivate an update you did on the template, which is in the accordeon, now when you click on a section of the accordion it automatically scrolls up or down to the content, I would like to desactivate that function like it was before please
and to finish, please go on the page www.eden-boites.com/devis-en-ligne.html
fill the form and see that on MOBILE only, when you click on the google recaptcha it messes up everything, ot works but it goes on another place ! thanks a lot.... I hope I dont ask too much, once again I am willing to pay for your services if you ask me to !
Hello,
Thanks for your Patience! We are still working on your Support Query[sb_private_reply] because it is really long. Also, please understand that it is really not in the Support Scope to provide fixes according to your customizations[/sb_private_reply]. Please allow us some more time before we can provide you with an Accurate Solution to your issues. Thank You so much for your Continued Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
WWW.EDEN-BOITES.COM
No problem, I will wait, let me sum up now that I have the time as clearly as I can to make it easier for you please :
FIRST PROBLEM :
On sm and xs mode, I would like the menu to appear on top under the top bar that will dissapear as we scroll and leave only the sticky menu over the header video
OR
the menu to appear over the video only on xs mode, and like it is on sm BUT in that case the menu needs to display directly on the bottom on sm, and we must not scroll down for it to show up
SECOND PROBLEM :
The top bar has some little bugs, first when we scroll down on lg and md resolution, you see the under line of it appears and its not very sexy I dont know what we can do about that ? Also when you check the line between the social icons doesnt reach the bottom just like it is the case for the top links on the left, how to fix these two problems please ?
THIRD PROBLEM :
I would like to make the post of the timeline blog appear in the container like it is already on lg md and sm, but on xs I want it to appear in container full and yur previous solution didnt work properly
FOURTH PROBLEM
I also would like to desactivate an update you did on the template, which is in the accordeon, now when you click FROM AN IPHONE on a section of the accordion it automatically scrolls up or down to the content, I would like to desactivate that function like it was before please, you can see this on the page index for instance
FIFTH PROBLEM
On the page www.eden-boites.com/devis-en-ligne.html when you fill from an iphone the form and click on the recaptcha, it messes up the position of where you are and goes back to footer, you must g back to the position to be able to click on the button to submit the form
SIXTH PROBLEM
on an iphone, and ONLY on the page index.html, the menu once its scrolled doesnt become sticky where it should, it goes up too much and then become sticky, I just wanted to let you know but once the problem number one will be solved (menu will be over the video), then the problem sixth wont be a problem anymore I guess :)
Please let me express all my gratitude towards you, I still LOVE your work YEARS after and wont change the template, its the best ever and i mean it, and thats the reason why I am so perfectionist with it as you already know I guess lol
screenshots
screen end
Hello,
Thank You so much for your Continued Patience!
You will need to move the Header Codes above the Slider in all the Devices (lg, md, sm, xs or xxs). Currently, there is no way to have different positions for Menus on different devices.
You will need to remove the .slider-parallax-inner DIV from #slider to fix the issue with Scrolling. We have just check this out and the Lines appear to be touching the bottom of the Top Bar perfectly fine.
Please use the following code instead:
This was fixed in the Latest Update. Please update the accordions: function() Function Block to the Latest Version.
We are still checking out this issue as it is a little bit weird and caused by the Google reCaptcha.
We have gone through this very deeply and run many tests on this and the conclusion on this is that the Sticky Header appears to be working fine in accordance with the Sticky Offset set for the Header, however, this happens only on iOS Devices because you will notice that the iOS Safari Address Bar shrinks when you scroll down and that is the reason why the Header turns sticky a little later. Unfortunately, this cannot be controlled because this is a Browser Issue.
Thank You so much for the Kind Words! :) We Really Appreciate them! We hope you understand that we can only provide limited customization support to our users.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
1/ ok, I am a little bit disapointed but if thats how it is I will just stick to it then and stop to insit, no problem thank you. Maybe it can be part of a future update ?
2/ taking the .slider-parallax-inner class out doesnt change ANYTHING unluckily, and yes I checked it on pc, macbook, safari, google chrome, iphone and samsung, there is a gap when you zoom; I even put screenshots, please check them again
3 / you already gave me this code, I tried it and I told you it doesnt work, I use it in the content of the blog timeline and it messes up everything, please check the screenshot I attach to this email to see
4/ I used to use the previous version and it worked fine without scrolling automatically, currently I use your VERY LATEST version of the template and this is now that I get this problem, how to getr rid of it please ? It scrolls only on iphones
5 / ok for the recaptcha I will be waiting, hope it will come up asap please because as you can understand the whole point for us to have a website is for this page form to exist so customers can make online quotes
6 / ok thank you !
have a nice week end, I am lookinf forward to fix our problems
Best regards
Mike
about the top bar, to prove you that it doesn touch, i changed the background color, please see you still see the red background under the phone icon
on another hand I saw that the line on the left on the right of LOGIN doesnt touch the TOP this time (when the social line doesnt touch the bottom)
maybe there is a mistake in the size of the social icons ? anyway please find here a screenshot
thanks
any update please ?
Hello,
This is a Coding Limitation. Some Elements on the Page are Uniquely defined so that they can be interacted with in a better way! Additionally, it is not really a great UX, if you show the Menu on the Desktop at the bottom and then show the Menus on the Mobile Devices at the Top because it generally disrupts the general flow of the Website Layouts.
We have double checked and triple checked this out and there is really no line shift on the Top Bar. Check these: https://www.dropbox.com/s/27e1vua36d9js1g/Screen%20Shot%202017-08-11%20at%209.30.36%20PM.png?dl=0 https://www.dropbox.com/s/tde65h1qqw0otdu/Screen%20Shot%202017-08-15%20at%202.54.41%20AM.png?dl=0 https://www.dropbox.com/s/5hxp68hr8y4vcaw/Screen%20Shot%202017-08-15%20at%202.55.10%20AM.png?dl=0 https://www.dropbox.com/s/efqlp89ymwwdrkt/Screen%20Shot%202017-08-15%20at%202.55.24%20AM.png?dl=0 . None of our Users has ever reported this issue yet. Maybe this is a Browser Issue, so please consider checking this on a Different Computer.
The Codes we provided earlier had .container-full but the new codes we provided has .container-fullwidth (which is the correct codes) We really double check our replies. :) Can you please use the New Codes and then provide us with a Sample Page so that we can track the issue and provide you with more assistance. Thanks for your Patience on this.
Please find and delete/comment the following code in the js/functions.js File inside the accordions: function() Function Block:
if( $body.hasClass('device-xs') || $body.hasClass('device-xxs') ) {
$('html,body').stop(true).animate({
'scrollTop': clickTarget.offset().top - ( SEMICOLON.initialize.topScrollOffset() - 40 )
}, 800, 'easeOutQuad' );
}Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Thanks for the very detailed answer, its always so highly appreciated.....
1/ Ok thanks again
2/ this is indeed very weird, it is making me the problem on two different pcs, and also from safari on my iphone I dont understand how possible it is that it doesnt appear on your side, but what I see is that from your demo its not the case, so I will try to recode it again from scratch with your coe, maybe I probably made a mistake somewhere !!
3 / yep very sorry, I didnt see you changed it but I still made the test again, and the problem isnt solved, please check http://www.eden-boites.com/blog6.html
4/ i did it it seems to be working perfectly thanks a lot !
5 / yep that is becoming problematic, I would be so grateful if you can come up with a solution I spent so many hours trying to figure it out what the problem was and cant find anything !
6 / is it possible to make the header appear at bottom on sm mode just like on md and lg ?
thanks !
any update please ? thanks !
[sb_private_reply]I guess you guys are really busy, but I'm waiting for an answer since august 14, please can you update ? We need your help thanks a lot in advance :)[/sb_private_reply]
Only problem 3, 5 and 6 to solve please
about the problem number 2, I guarantee that it was a problem, and I tried on different computers and also mobile, it appeared only when you zoom to the maximum, and I found the solution, the fontsize of the top bar had to be changed from style .css from 13px to 12px and now its working absolutely fine, just in case someone else is maybe having this issue :)
Can you update me with problem 3 5 and 6 please ? Thanks
Hello,
[sb_private_reply]Thanks for your Patience![/sb_private_reply]
Firstly, you will need to place your Codes Timeline Codes inside the codes we have provided:
The end result of your codes should look like this:
... Your Timeline Codes here
... Your Timeline Codes here
Secondly, since you will be using 2 Timeline Codes on your Page, you will need to duplicate the #posts to #posts-2 and also duplicate the Isotope/Infinity Scroll JS Codes at the bottom of the Page, so that it works properly.
[sb_private_reply]You really need to hire a Freelancer to speed up your Development time and handle complex customizations for your Website.[/sb_private_reply]
We have checked out all the reCaptcha Demos included in the Canvas Package but this issue is specific to your Website. Please consider recoding your Form and also consider checking out your Website HTML Validation as there appears to be some Duplicate HTML IDs.
It is Definitely Possible but you will need to add the .force-full-screen and .with-header Class to the #slider Element. Also, add the following code in the js/functions.js File inside the fullScreen: function() Function Block:
if( $('#slider.with-header').next('#header').length > 0 && ( !$body.hasClass('device-lg') && !$body.hasClass('device-md') ) ) {
var headerHeightOff = $header.outerHeight();
scrHeight = scrHeight - headerHeightOff;
}just after the following lines of code in the same function:
if( $('#slider.with-header').next('#header:not(.transparent-header)').length > 0 && ( $body.hasClass('device-lg') || $body.hasClass('device-md') ) ) {
var headerHeightOff = $header.outerHeight();
scrHeight = scrHeight - headerHeightOff;
}This will definitely work fine. Hope this Helps!
Thank You so much for providing us the fixes regarding the issue with Error 2, however, the Font Sizes have always been 13px in the Default CSS.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
THANKS a lot for answering me, about the blog container problem I did my very best but it seems not to be working, I know the problem comes from me and not your solution but I cant figure out what is my mistake ?
please check http://www.eden-boites.com/blog7.html
sorry it worked great only I had on xs to write fullwidth instead of container-fullwidth cause I wanted it to occupy the whole width of the website, thank you !!
I will try to work on second two last problems and I will be done, you guys will be able to take vacations from me for at least a year and a half haha :)
About the recaptcha, I checked everything and it is still not working, BUUT :
I found out there is a new system called recaptcha invisible, it will fix my problem and make my life easier !
Only problem, I am not able to adapt the code to my design
currently I have :
ENVOYER VOTRE DEMANDE
When google asks me to put :
<button
class="g-recaptcha"
data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXX"
data-callback="YourOnSubmitFn">
Submit
</button>
can you tell me how to adapt the google code so it looks exactly like my current code ? Thanks !!!!!
I did this
<div class="contact-form-result" style="text-align: justify;"></div>
<div class="col_full">
<button data-sitekey="xxxxxxxxx-xxxxxxxxxxx" data-callback="YourOnSubmitFn" name="submit" type="submit" id="submit-button" tabindex="5" value="Submit" class="button button-3d button-large btn-block nomargin g-recaptcha">ENVOYER VOTRE DEMANDE</button>
</div>but as you can see on www.eden-boites.com/5.html
it doesnt work, doesnt check all the required fields and doesnt send the email ?
hello !!! omg I didnt make the test before ! the problem doesnt come from my code, with the v2 recaptcha even from your demo on this url :
http://themes.semicolonweb.com/html/canvas/contact-6-recaptcha.php?transition=disable
when I visit from my iphone and I complete the recaptcha it jumps out to the footer directly ! please update me I am lost now and I was trying to fix this since yesterday
thanks
https://github.com/google/recaptcha/issues/130
same problem than them, doesnt come from my code
Hello,
Were you able to fix the Query 6? Hey! You can always get in touch with us for the minutest issues, its just that we don't really handle Customization Requests and sometimes it slightly harder to detect issues related to customizations but we will surely do our level best. So always get in touch with us whenever you face any issue. Thanks for being Patient with us.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
I tried to apply the query 6 but it didnt work well, but actually I will leave it like this I think now the website is looking really really good thanks to you, thanks a lot, and I agree with your statement of the ios and recaptcha it comes 100% from them and not from us like we thought
thank you Canvas Team, my website is looking amazing <3
Hello,
Thank You so much for your Continued Patience with us! We will keep you informed on the reCaptcha Status once they fix this or if we can also find a suitable solution for this. Thanks for your Patience.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard