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;
}
}
Related
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 :)
I am using the wordpress twenty twelve theme
I am unable to turn off the menu at 800 px, using media queries.
my site
Try setting in your style.css
#media screen and (max-width: 800px) {
.menu-main-menu-container{
display:none;
}
}
This will make the main menu 'disappear' under 800px window width.
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;
}
}
I've got some CSS and media queries which hide and show my navigation:
So by default the navigation is:
nav {
display: inline;
}
Then using media query I hide it:
#media only screen and (min-width: 480px) and (max-width: 767px) {
nav {
display: none;
}
}
All works perfectly well, I then have some JavaScript hooked up to a button to show and hide the navigation when the media query is in effect.
However when I resize the browser back to full screen, larger than 767px the navigation does not reappear. How can I get the navigation to appear for desktop users?
bind the jquery resize handler to the window like this
$(window).resize(function(e){
if($(window).width() > 767){
$('nav').show()
} else {
$('nav').hide()
}
})
there is probably a few optimisations you can do with caching objects but this should get you want you need to start with
#media all and (min-width: 768px) {
nav
{
display: inline!important;
}
}
Kai Qing's answer helped me realise that I just needed to override the inline CSS the jQuery .toggle event was adding - Inside the correct media query of course.
You can make the js add a class to the nav and use !important to overwrite the media query statement...
nav {
display: inline;
}
.force_display{
display:inline !important;
}
#media only screen and (min-width: 480px) and (max-width: 767px) {
nav {
display: none;
}
}
just add force_display class in the js function (assuming you're using jquery)...
$('#button').on('click', function(){
$('nav').toggleClass('force_display');
});