my sample site is here LINK.
Everything on PC works perfectly, but when i want to go on mobile view, my responsive menu dont work and front page is changed fully.
For front-page i used "ThemeIsle Companion", on mobile view, there isnt any of it.
Theme name is Hestia.
The responsive website depends on your stylesheet. Sometime some themes don't have responsive layout. You have to write some #media css codes in external/ internal css style sheet and attach with the theme. Click here
Related
I’m using tagDiv's “news hub pro” newspaper theme for my wordpress site (as seen in the demo https://demo.tagdiv.com/newspaper_news_hub_pro/) and I see that the header is not sticky in the mobile version. How do I fix it? In the homepage template, I see the toggle to enable sticky menu for mobile but it doesn't seem to work.
Also, how do I make the top row sticky as well? This is the row that includes the logo, title, my account, search button, etc. Do I need to create a child theme and add my own CSS?
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");}});});
So I made a website which has two CSS files; one is for regular desktop computers, and one is for mobile devices with a max width of 480px. Something happened while I was editing my website, and now the mobile version is the only CSS that shows.
I have two CSS' linked in my header, both the mobile CSS and regular (desktop) CSS. When I remove the mobile css link, the desktop version of the website shows like it should. However, when the mobile css stylesheet link is in place, only the mobile website is what shows on both desktop and mobile devices.
When you go onto my website on a laptop, the whole page is shoved to the left, and it is only 480px wide. Any idea what is up?
I figured it out. There was a wordpress plugin called "Above the Fold" which was the problem. I had to link the CSS in the footer.
Is there a way to target css to the mobile menu only? I am using http://athemes.com/theme/Sydney and my dev server is at http://150.101.201.63/wordpress2/WordPress/
Simply put when the menu changes to the mobile menu (one with single button to open menu versus top navigation menu) I want to add some styling. I used to do this by device width but I'm finding this less effective with this theme.
Any help appreciated.
Resize your desktop window to actuate the mobile display of your site and use a web inspector tool in your browser to find the element you'd like to change.
Your Dev site is broken, but Renovation Princess uses the element #respo-menu-list-left to effect portions of your mobile menu.
I tried/guessed it and the url is http://150.101.201.63/wordpress2/wordpress/, so now uppercase in wordpress.
I looked in over the website and when it displays the mobile menu it changes the menu id to mainnav-mobi, so you can safely write you css for that id and it will only show on mobile.
#mainnav-mobi {
/* css here */
}
After integrating a CSS/xHTML theme into wordpress, the bootstrap responsive menu no longer opens submenus when viewed on a mobile browser: http://d.pr/i/HrBg
Wordpress Theme (submenu not working): http://gtglobalcorp.com
Original CSS/xHTML (submenu working): http://ev.to/coded
Do you happen to know why?
In the mobile menu, all your href attributes are hashtags.
What we have here is either a loop that isn't outputting the right markup or a Wordpress Mobile menu that's different from the Wordpress Default menu.
Without knowing the architecture of the theme, this problem can not be diagnosed further.