I am using WordPress 4.3.1 with Newspaper theme. The top bar menu having social links and buttons like "submit content", "contact us" "date" etc is not visible in the mobile view or whenever I make the screen size small. Please help me with issue.
Website name : www.teachologist.in
In the theme style sheet there are media queries that hide the elements at max-width: 767px. You would need to remove the display: none; and perhaps replace with other appropriate styles to make the menu still look good on small devices.
See wp-content/themes/Newspaper/style.css Line 1185
#media (max-width: 767px) {
.td-header-top-menu-full {
display: none;
}
}
And see wp-content/themes/Newspaper/style.css Line 4946
#media (max-width: 767px) {
.td-header-sp-top-menu {
display: none !important;
}
}
Related
WordPress Navigation Block - Twenty-Twenty-Three theme
How to change the CSS media-query breakpoint at which the hamburger button displays on mobile and the full menu on wider screens?
The hamburger minimize-able menu can be turned on from Dashboard->Appearance->Editor:
add this to your child theme's CSS changing the value in the parenthesis:
#media screen and (max-width: 767px) {
/* hamburger button */
.wp-block-navigation__responsive-container-open {
display: block !important;
}
/* full menu */
.wp-block-navigation__responsive-container:not(.is-menu-open.has-modal-open) {
display: none !important;
}
}
I'm working on https://apostolosloukas.org website. The menu works fine in pc and android mobile phones. However, in iPhone 11 with iOS 14.6 the sub items of the menu are not visible even though we click on the parent item.
I'm not sure of how to fix this, but now I'm thinking to make always visible the submenu items in the hamburger (responsive) menu for mobile devices.
I'm working with CSS.
My current code is the following but is not working. Any help please?
#media only screen and (min-width: 768px) {
.dropdow-menu ul.li {
visibility: visible !important;
}
}
I found the following solution:
#media only screen and (max-width: 769px) {
.navbar-collapse ul {
display: block !important;
visibility: visible !important;
top: 100% !important;
position:relative;
}
}
I am building a website with wordpress.
The url is here
My problem is that the menu is overlapping with the logo until the screen size is 1300px ... can i force the mobile / burger menu to appear until it has 1300px or is there any other solution for this?
Try this:
#media only screen and (max-width: 1300px) {
.main_menu {
display: none !important;
}
.mobile_menu_button {
display: table !important;
}
}
Here's an example of using media queries to drop you navigation below your logo if the screen width is above 1300px, and below 1500px (since it looks fine on wide screens).
#media (min-width: 1300px) and (max-width: 1500px) {
header .header_inner_left {
position: relative;
left: 0px;
top: 0;
}
}
You'll have to add this to your stylesheet and play around with the dimensions of your query, but this should solve the collision issue. You can also use media queries (like your theme is doing when it turns the navigation into a hamburger stack navigation) by switching styles in your stylesheet based on the screen size. There are more than one styles that are being modified to create a functional mobile navigation, so this route may be the easiest if you want to avoid needling through the core theme code.
Hope that helps! Good luck :)
Im using pretty photo on my web, it works good, but i find it useless in mobile, so im trying to hide it in the media query by using display none, but the problem is that im not shure what is it that i have to hide. Thanks!
Put it in a div with a class and hide this one:
.gallery-container {
display: block;
}
#media screen and (max-width: 600px) {
.gallery-container {
display: none;
}
}
I have used Bootstrap extensively and regularly used the css classes to hide various elements from mobile view. Does Skeleton CSS have a similar thing for hiding content on a mobile?
Used a media query example below:
#media only screen and (max-width: 500px) {
.someStyle {
background-color: display: none;
}
}