I'm busy working on a responsive mobile first site and one of the requirements is to display the main navigation (nav>ul>li) like it would be a tag for the mobile view. I've in the past used either javascript to display it on click or just kept it inline depending on the client, but haven't had this requirement before, so I'm wondering if there is a way with CSS to have the <li> display like it would if it were a <select> tag. For desktop view it will just display normally inline.
You need to have separate elements for nav and select like below.
<select id="mobileNav">
<option>your links</option>
</select>
and your original nav
<nav>
<ul>
<li>links</li>
</ul>
</nav>
Now in your CSS use media queries to toggle based on screen width:
#media (max-width: 480px) {
nav {
display: none;
}
select#mobileNav {
display: block;
}
}
#media (min-width: 481px) {
select#mobileNav {
display: none;
}
nav {
display: block;
}
}
Related
I'm writing this message as I'd need to know how to set a div made of 3 buttons that, in the moment in which the broswer's window is shrunk and it's no longer on full screen, turns into a pop-up menu visible through the conventional three lines.
You can define #media in your css.
An example has been set here:
https://jsfiddle.net/jfgm9r2v/8/
The html code is like this:
<div class="hideOnSmall">
<button>Text1</button>
<button>Text2</button>
<button>Text3</button>
</div>
<div class="displayOnSmall">
<div class="hamburger-box">
<button>MyHambuger</button>
</div>
The magic happens in the css:
.hideOnSmall {
display: block;
}
.displayOnSmall {
display: none;
}
#media only screen and (max-width: 768px) {
.displayOnSmall {
display: block;
}
.hideOnSmall {
display: none;
}
}
I'm not a coder or developer. I'm trying to save us money, and fix a problem with my wife's responsive WordPress site.
We hired an SEO guy who said he could also write custom JavaScript for us. He created a call to action button that behaves differently between desktop (scroll to Contact Us form) and mobile (Call Now).
I noticed he was duplicating the function, in the header custom HTML, to scroll to form on both function calls of the button. I changed his custom code in the header to use href="tel:xxxxxxxxxx".
It still scrolls to the contact form. I used the same HTML for our contact info in the footer, and that works fine. I'm stumped.
Please help.
Here is the code he wrote:
JavaScript:
setTimeout(function() {
window.scrollTo(0, 0);
}, 1);
jQuery(function($){
function scrollToForm() {
$([document.documentElement, document.body]).animate({
scrollTop: $('#contact-form').offset().top
}, 1000);
}
if (window.location.hash == '#contact-form'){
setTimeout(function(){
scrollToForm();
}, 1000);
}
$('.top-cta-btn').click(function(e){
scrollToForm();
if (window.location.href == 'https://www.sironatherapies.com/#contact-form' ||
'https://www.sironatherapies.com/') {
return false;
}
});
});
Custom HTML Header:
<style>
.top-cta-btn {
background: #dd9f27;
padding: 13px;
color: #000;
cursor: pointer;
}
.top-cta-btn:hover {
color: #fff;
}
#media (min-width: 320px) and (max-width: 767px) {
.header_bottom_right_widget_holder {display: block !important}
.top-cta-container {display: none}
.top-cta-container-mobile {display: block;
margin-bottom: 30px;
margin-top: 35px;}
.testimonials-section {display: none}
.side_menu_button {display: none;}
.vc_custom_1454330137581 {display: none;}
}
#media only screen and (max-width: 1000px){
.q_logo a {
left: -80%;
width: auto!important;
}
}
#media only screen and (min-width: 768px) {
.top-cta-container {display: block}
.top-cta-container-mobile {display: none}
}
</style>
<div class="top-cta-container">
<a class="top-cta-btn" href="/#contact-form">Book an Appointment Today</a>
</div>
<div class="top-cta-container-mobile">
<a class="top-cta-btn" href="tel:xxxxxxxxxx">Call Now</a>
</div>
You need to change the CSS selector in the Call-to-Action event handler, in order to target only the Desktop CTA button and not the mobile one:
Now:
$('.top-cta-btn').click(function(e){
scrollToForm();
...
Should be:
$('.top-cta-container .top-cta-btn').click(function(e){
scrollToForm();
...
This way, you are limiting the scrolling, only when the element .top-cta-btn that is inside the .top-cta-container element (Desktop/Contact Form link) is clicked.
The mobile CTA button will not get triggered since it is inside another element, the .top-cta-container-mobile.
Also, there's no need for the duplicate code. You can remove it.
I have an HTML code: <a><span>My Text -</span> Loooong Text</a>
Output: My Text - Loooong Text
When screen resolution goes to width lower than 445px, I want Loooong Text as: L. Text, and if it increases, text returns to original size.
Any help? Thanks.
You can split the text into more elements, and then use #media query in your CSS to decide which to show and which to hide.
HTML:
<a>
<span>My Text -</span>
<span id='long'>Loooong Text</span>
<span id='short'>L. Text</span>
</a>
CSS:
#media screen and (max-width: 445px) {
#short { display: inline; }
#long { display: none; }
}
#media screen and (min-width: 446px) {
#short { display: none; }
#long { display: inline; }
}
Here is a modification of Koby Douek's answer that might suit you.
also utilizing #media.
Wrap the collapsing portion in a span. Then use media queries to toggle its display. You can use this class to wrap anything you want to collapse.
HTML:
<a>
<span>My Text -</span>
L<span class='collapse'>oooong</span> Text
</a>
CSS:
#media screen and (max-width: 445px) {
.collapse { display: none; }
.collapse::after {content: '.'}
}
#media screen and (min-width: 446px) {
.collapse { display: inline; }
}
You mentioned you are generating the content using a PHP script, this strategy should be compatible.
Iam using this slider http://tympanus.net/codrops/2013/04/17/background-slideshow/ for fully background slider. I added some image in the class main:-
<style>
.mobile {
visibility:hidden;
}
#media(max-width:480px) {
.desktop {
visibility:hidden.
}
.mobile {
visibility:visible;
}
}
</style>
<ul id="cbp-bislideshow" class="cbp-bislideshow">
<li class="desktop"><img src="images/1.jpg" alt="image01"/></li>
<li class="desktop"><img src="images/2.jpg" alt="image02"/></li>
<li class="mobile"><img src="images/mobile/1.jpg" alt="image03"/></li>
<li class="mobile"><img src="images/mobile/2.jpg" alt="image04"/></li>
</ul>
What i want to show image having class desktop and to hide image of class mobile and also to hide class desktop and show class mobile if browser having max-width of 480px. But after showing image of class desktop it shows white screen which i don't want.
Please help.
Use display: none and display: block instead of visibility: hidden and visibility: visible respectively, like this:
<style>
.mobile{
display: none !important;;
}
#media (max-width:480px) {
.desktop{
display: none !important;;
}
.mobile{
display: block !important;;
}
}
</style>
I have problem with css rules inside IE10 when they are inside page included by ngView (I'm using Angular 1.0.6). It work fine for other brower (I think that it work for IE11, didn't tested myself):
I have css like this:
.checker {
display: none;
}
#media (min-width: 1041px) {
.m1 { display: block; }
}
#media (min-width: 980px) and (max-width: 1040px) {
.m2 { display: block; }
}
#media (max-width: 767px) {
.m3 { display: block; }
}
#media (max-width: 979px) {
.m4 { display: block; }
}
and html:
<span class="checker m1">m1</span>
<span class="checker m2">m2</span>
<span class="checker m3">m3</span>
<span class="checker m4">m4</span>
the css is inside <style> tag on my page that's rendered inside ngView. And for page lareger then 1041px it show both m1 and m3. When I resize the browser the m3 disappear. It also work when I have the style and html inside the page not inside ngVew.
What is the problem here? is there a bug in IE10? How to fix my css? It's something with media queries, maybe the order of them?
I was able to fix it by adding min-width to that rule:
#media (max-width: 767px) and (min-width: 100px) {
No idea why but it work.