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 */
}
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");}});});
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
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.
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.
When opening the main menu (hamburger icon top right) of my page (password = "shooga1") on a smartphone, menu items are not there - menu is empty. Opening the same menu on desktop, after reducing browser window to make it narrow like on a smartphone, the exact same menu works normally.
This problem occurs regardless of which mobile browser or desktop browser is used. Pretty puzzling, any suggestion as to what is the problem or how to solve it would be appreciated.
I think the problem is that the mobile menu is empty.
In your website, there is an object's id called mobile-menu, and when users use the mobile phone to check the menu, this area will become visible.
(Normally it's invisible. When you touch the icon on the top-right side, it will become visible.)
But I can not see any code in this area. That means you designed the menu for desktop only and you maybe need to design the menu for mobile, too.
It's up to the framework you use. Maybe there are some methods that can be used to let the menu for mobile be the same as the menu for desktop.