First go at working with a (Dara) child theme here, not far off noob. All was working great and the website was signed off until the client updated Wordpress, and now the submenu items have stopped pulling through on mobile. I tried to use Reponsive Menu plugin as a temporary workaround, but the submenu items do not appear even then.
Had a couple of pals look at it and there appears to be way too much styling applied to .mainnavigation.
Any easy-to-understand help would be much appreciated on my quest to learn Wordpress development!!
Tried deactivating all plugins, doesn't seem to be a conflict. It's gotta be a CSS issue I just don't understand.
Link to site https://froufroudays.co.uk/
The sub-navigation appears when parent element is hovered, but the way of this is strange: css change "left" parameter from "99999em" to "1.4em", but only for media query "screen and (min-width: 768px)" - you can find it on the line 2125 of your style.css
So, your theme not expects the sub-navigation in mobile menu.
To resolve this issue you just need to add css rule on hover for media query smaller than 768px.
#media screen and (max-width: 768px) {
.main-navigation ul li:hover > ul {
left: 0;
top: 0;
position: relative;
}
}
But this way is not perfect. The best is to show sub-navigation on click on mobile devices using JavaScript.
Related
I need to remove the hamburger menu when a user is viewing the community site on a mobile device. I'm told I can do this via CSS, but I'm not sure how. Any ideas?
Doesn't seem like there are any declarative options out there. I found information pertaining to Mobile Publisher, but that doesn't apply.
Thanks!
#media screen and (max-width: 776px){
.hamburger-menu{
display: none;
}
}
I'm pretty new to Wordpress modding.
At the moment, I'm using the Shift Nav plugin and I've set it to appear when viewport < 767px. This means that the original logo is there regardless of viewport size.
From the CSS I know that the class for logo is set for media all. I would like:
media (max-width: 767px) { display:none; }
But I don't know how to override the existing css code. I've tried adding the above CSS to the CSS editor and obviously nothing happens.
I don't understand what appears to be inline css, see here:
The site is here:
www.thegraduated.co.uk/store
Thanks in advance
You have a style attribute of display:inline-block in your html tag. You can use !important to overwrite that.
.site-logo-anchor a img { display: none !important; }
On mobile devices, my post's title and date are clashing and overwriting each other. This looks awful. Here is my site. http://defensionem.com/200-russian-soldiers-along-with-t-90-tanks-in-syria/
It is on Wordpress.
How do I fix this? There are no options in the Theme and I can use Custom CSS.
I tried to hide the date but it did not work.
.meta--items_fl{
display:none !important;
}
What you can do here is write media queries to hide specific elements or change their related css at certain screen lengths. For example,
#media only screen and (max-width: 700px) {
div.meta--items.fl {
display: none;
}
}
The above code would hide the date at a screen width of 700px and below. You can mess around with the width the breakpoint triggers to see what works best for you.
To learn more about media queries, you check this out. Hope that helps!
I am working with Bootstrap 3.3.2 . My Goal with the site im building was to have the nav menu always collapsable, like when it is in mobile view. to accomplish this I went to bootstrap.com/customize and changed the #grid-float-breakpoint: to 99999999px; so large that it would never uncollapse the nav. This works fine for all other browsers except for Safari. In safari my nav header image shows up, but the icon for the drop-down menu is gone.
In safari when inspecting the drop-down icon's css I find:
#media (min-width: 99999999px;){
.navbar-toggle {
display: none;
}
}
It seems as if Safari thinks my viewport is actually greater then 99999999px. Now the simple change would be to adjust my code to display: inline; But when i do this it takes the .navbar-toggle out of the grid system and not pliable for responsive.
Any help towards a solution or if anyone knows of this as a bug issue, would help out alot. I have already researched issues with the #grid-float-breakpoint and did not find much other then this WAS an issue with chrome a while back but has since been patched.
thanks
Presumably you're referring to http://crbug.com/375574 , which apparently still applies to Safari 8. The solution is to use a somewhat less absurdly-high value for #grid-float-breakpoint. Removing a single digit seems to be sufficient:
#media (min-width: 999999999px) {
Also, I went ahead and filed a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=141533
After messing around with the css for a few hours I found that adjusting the #media (min-width: 9999999999px) .nav-bartoggle to -webkit-display: inline; and adjusting the parent element width and a few other adjustments can result in acceptable code. Im sure cvrebert's method will work much better. But I just wanted to comment that there is pure css work arounds in the case some one needs to know in the future.
After searching for a while, I found this WordPress template http://demo.wpmultiverse.com/newsted/ that suits my simple needs. But the problem that I am having is the responsive feature of this tempalate's homepage. All the other pages work fine while the homepage is broken when I resize the width of my browser to be that of a mobile screen. Even if I view it from my mobile screen it is broken.
I tried clearing the divs and I have messed around with the CSS for some time now but I can't get to the root of the problem. I am unable to understand why other pages work fine with the same CSS style and only the homepage with the posts list is messed up.
Put this on your custom css:
#primary-sidebar .widget {
float: left;
}
But you still need to set the media queries for mobile and tablet
and put the code above.
use this one:
#media (max-width: 768px){
#primary-sidebar .widget {
float: left;
}
}