my website's main menu responsive breakpoint is at the 850px for mobile menu. Though I want to change it to a mobile menu from 1369px, as the desktop main menu after 1369px overflow the site content. I have tried CSS such as:
#media only screen and (max-width: 1369px) {
.header-nav.header-nav-main.nav.nav-left.nav-line-grow.nav-size-small.nav-spacing-medium.nav-uppercase {
display: none;
}
.mobile-nav.nav.nav-left {
display: block; !important:
}
}
Thus it only hides desktop menu but no hamburger menu appears...
Could somebody advise me how to change this breakpoint correctly? p.s. I am an amateur beginner in web development.
Thank you in advance.
you may add another breakpoint to your css file easily by adding #media :
#media only screen and (max-width: 1369px) {
.header-nav, .header-nav-main, .nav, .nav-left, .nav-line-grow, .nav-size-small, .nav-spacing-medium, .nav-uppercase {
display: none;
}
.mobile-nav, .nav.nav-left {
display: block; !important:
}
}
Related
I'm trying to toggle my mobile menu at 1172px as the default is 850px but it's not working.
My web is: www.maria-educandoconamor.com
I'm current using the following css to achieve it:
#media only screen and (max-width: 1172px) {
.header-nav, .header-nav-main, .nav-line-grow, .nav-size-small, .nav-spacing-medium, .nav-uppercase {
display: none !important;
}
.mobile-nav, .nav.nav-left {
display: flex !important;
}
}
But unfortunately it's not working.
Does somebody know what I'm doing wrong?
Thanks.
So i have this code in my css file to hide certain items from my topbar in my website and when i view the site on my desktop and inspect with mobile view the items I want hidden are correctly hidden but when I go to the website on my phone the items are visible.
#media screen and (max-width: 768px) {
#topbar {
height: 50vh;
}
#topbar img {
max-height: 90px;
}
#topbar .social-links a {
display:none;
}
#topbar .logo {
display:flex;
align-content:space-evenly;
}
#topbar i {
display:none;
}
#topbar a {
display:none;
}
}
I hope you try again after clean phone browser cache.
Thank you.
Regards.
Would you please try clean browser cache.
It maybe browser issue.
I would like help with code that will show a different slideshow section on Shopify based on the users screen size. I am using the code below which works great on a mobile device but on my laptop I see both slideshows.
What code do I need to add to hide the mobile slideshow when the screen size is above a certain amount of pixels?
#shopify-section-mobile-slideshow {
display: none !important;
}
#media (max-width: 450px){
#shopify-section-slideshow {
display: none !important;
}
#shopify-section-mobile-slideshow {
display: block !important;
}
}
Question answered by #stenley -
Use inspector elements to ascertain the section ID
For me:
#shopify-section-1586161998623 { display: none; }
#media (max-width: 768px){
#shopify-section-slideshow {
display: none !important;
}
#shopify-section-1586161998623 { display: block; }
}
I am using Node child theme for my site. The header and menu works fine in the desktop mode but when it is shrinked to responsive mood the heading with menu disappeares. I have tried allmost all the options but none is working. I couldn't find any documentation of the theme and any specific solution on the net. My site url is-
http://onlineinternetquest.com/
Add This code in your mobile media query
header.edgtf-mobile-header {
display: block !important;
}
header.edgtf-mobile-header .edgtf-mobile-header-inner {
height: auto;
}
You have media-query in your css that says under 1024px display: none; to head.
See screen shot from F12:
So remove this media-query:
media only screen and (max-width: 1024px)
.edgtf-page-header, .edgtf-top-bar {
display: none;
}
Hi I am looking for some help in regards to understanding why the following page does not show up on a mobile size screen (480px) as all the other pages that have been built show up fine.
http://leicesterbakery.co.uk/index.php/product
I have a module class suffix with the following styles within the media queries in order to control what is shown on a mobile and what is shown a desktop.
(media query with max-width: 480px)
.range_full {
display: none;
}
.range_resp {
display: block;
}
Normal CSS file
.range_full {
display: block;
}
.range_resp {
display: none;
}
Would appreciate it if somebody could advise as really cant work out this isnt showing up.
You have a display: none on .range_full
Change it to block and it will show:
#media (max-width: 480px) {
/***** BASIC LAYOUT *****/
.range_full {
display: block;
}
.range_resp {
display:block;
}
.fullrange_full {
display:none;
}