I ask about the help of experts wp, I myself could not find in which direction to dig.
Problem: (only) at safari browser when scrolling page drop css (restructured DOM).
Screenshot: https://yadi.sk/i/a371nKioyH1Uyw
How to repeat:
open page and scroll down;
scroll to top;
over content appears foter and/or sidebar.
Example page:
http://142.93.111.137/education/?p=353
http://int20.ru/?p=467
site work on wordpress.
teamplate (ThimPress education pack): https://thimpress.com/product/education-pack-1-free-education-wordpress-theme/
Can check on domains:
http://int20.ru
http://142.93.111.137
The solution to the problem was to remove the bootstrap.
Related
I inherited a website with some new business. The menu works fine on the desktop when viewed at full screen. When the browser is sized down and the navigation links are placed into the hamburger menu, it doesn't work. I'm not sure why it isn't working.
If you inspect the element, the links are there, but the nav bar doesn't expand at all. It's using foundation for the menu. I've read the documentation and I'm still not sure why it isn't working. Any guidance is appreciated.
Here's a link to the site: JordanPlumbing.com
Replace this code in lnm-scripts.min.js
jQuery(function(){if(location.hash!=""){window.location=location.hash.replace("#!","");}
jQuery(document).foundation();jQuery("#preloader").css("width",jQuery(window).width());jQuery("#preloader").css("height",jQuery(document).height());jQuery(".ajax-link").on("click",function(){jQuery(".ajax-link").removeClass("ajax-active");jQuery(this).addClass("ajax-active");});jQuery("ul.children").parent().addClass("page_parent"); jQuery(".slick-background-slider .slick-slide").css("min-width",jQuery(window).width());jQuery("#scrolltoform").click(function(){if(jQuery("#contactForm").length>0){jQuery('html, body').animate({scrollTop:jQuery("#contactForm").offset().top},2000);return false;}else{return true;}});});jQuery(window).load(function(){if(jQuery("#click-on-load").length>0){jQuery("#click-on-load").click();}
jQuery(".color-picker").on("click",function(){jQuery(".color-picker").toggleClass("translate");});});jQuery(window).on("resize load",function(){ if(jQuery(window).width()<=1500){var ratio=2560/1440;jQuery(".slick-desktop").css("min-height",jQuery(window).height());jQuery(".slick-desktop").css("min-width",jQuery(window).height()*ratio);jQuery(".slick-desktop").css("left",-((jQuery(".slick-desktop").width()-jQuery(".slick-background-slider .slick-slide").width())/2));jQuery(".slick-desktop").css("position","relative");}
else{jQuery(".slick-desktop").css("min-height","auto");jQuery(".slick-desktop").css("min-width","100%");jQuery(".slick-desktop").css("left","0");}
if(jQuery(".slider-wrapper").width()>jQuery(window).width()){var overflow=(jQuery(".slider-wrapper").width()-jQuery(window).width());var fixPositioning=overflow/2;jQuery(".slider-wrapper").css("left",-fixPositioning);}});jQuery(window).scroll(function(){jQuery("[class*='animate-from-'").each(function(){var theTop=jQuery(window).scrollTop()+(jQuery(window).height()-(jQuery(window).height()/4));var thisTop=jQuery(this).offset().top;if(theTop-250>thisTop){jQuery(this).delay(500).addClass("complete");}});});
I am working on one website. There is chat box which display well in firefox. But not in google chrome. I have try many trick but i cant fix it. Will you give me some solutions for it.
The site is http://ng.whoosmart.com/index.php?route=product/product&product_id=53
Its opencart site when you open this url in firefox its display well when you scroll down page it is in the footer.
But when you open in google chrome then its not display when you scroll down to page.
Add chatbox div in the end just before closing of body tag it will position correctly on chrome.
I'm developing a website and on its home page I have some sliders.
When I use these sliders I used to get horizontal scroll. I managed to fix that using overflow-x:hidden; at the css for the body element.
My problem is that When I click and drag the page to the right the scrollbar doesn't appear, but the user have the same effect as if he was using the scrollbar.
I received the html/css from a third part front-end developer and I'd prefer not to have to modify his css much.
Would you have any tips to fix this behavior without having to do further changes in the html/css structure?
Thanks in advance for any help.
I have a very basic theme that I created and I'm running into a problem that I've never experienced with any other theme I've made.
The homepage, pages and blog category pages display fine. When I click on an individual blog post, though, the post appears at the TOP of the page, UNDER the header and nav bar.
http://s5.mynewsitereview.com/category/blog/ - this is correct
http://s5.mynewsitereview.com/test-post-one/#more-1 - this is not
Please help!
I think the problem is the page is scrolling (oddly, I agree) to your more-1 anchor because you've specified that in your link (after the #).
I think you have two options:
Get rid of the anchor in your link (http://s5.mynewsitereview.com/test-post-one/ looks fine), or
Move (to the top of your post) or remove altogether the anchor (<span id="more-1"></span>)
The problem is because <div id="main-pages">
have style:
overflow: hidden;
EDIT:
There is one easy to implement full height layout with header, footer and columns.
I have created a drupal theme, URL: http://sundancefoundation.org/
There is a small shift in the layout when we switch between home page and about us page.
This is working fine in firefox only, all other browsers are showing this shift.
I know this is a CSS issue, but not able to fix it.
Any help is appreciated.
Thanks.
The About us page is shorter than the screen height and therefor has no need for the scroll bar on the right hand side of the screen. The home page is longer and has a scroll bar. When the scroll bar appears or disappears it looks like the screen is shifting but that's all it is.
This css rule will simple fix the body width flickering issue:
body {
overflow-y: scroll;
}