I have implemented the css as shown here: How to make twitter bootstrap menu dropdown on hover rather than click
However want to disable the dropdown on hover when the navbar collapses as it acts a bit buggy.
How can I do it?
You could try wrapping the CSS to disable the dropdown in a media query so that it is only disabling it at a certain page width... Reading up on media queries and trying to understand how bootstrap implements them is going to be one the keys to debugging this. Here's what I tried with the previous answer's fiddle.
http://jsfiddle.net/2Smgv/5544/
#media (min-width: 767px) {
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
}
}
Related
I would like to change the background colour of "After" to blue upon clicking, but no matter what it just doesn't show. I'm not sure what is wrong here in SCSS. Would really appreciate any advice!
Here's the JS Fiddle: https://jsfiddle.net/u1h9fe6v/
.grid-list {
--color: #f6f8ff;
--background: #2b3044;
--background-hover: green;
--background-active: blue;
padding: 6px 12px 6px 8px;
margin: 0;
display: flex;
outline: none;
position: relative;
border: none;
border-radius: 9px;
background: var(--b, var(--background));
cursor: pointer;
-webkit-appearence: none;
-webkit-tap-highlight-color: transparent;
transform: scale(var(--scale, 1)) translateZ(0);
}
.grid-list:active {
--scale: 0.95;
--background-active: blue;
}
.grid-list:hover {
--b: var(--background-hover);
}
It looks like you can set the background color in the
".grid-list.animation.active {" style. Like this ...
.grid-list.animation.active {
--span-name: text-active;
--dots-name: move;
--lines-name: scale;
--lines-duration: 0.15s;
--lines-delay: 0.3s;
background: blue;
}
This question already has answers here:
Using Sass Variables with CSS3 Media Queries
(8 answers)
Closed 7 years ago.
I'm trying to do something like this:
$arrow-size: 30px;
#media only screen and (max-width: 449px) {
$arrow-size: 15px;
}
div.selector {
height: 0px;
width: 0px;
position: absolute;
bottom: 0px;
left: 50%;
border-bottom: $arrow-size solid white;
border-left: $arrow-size solid transparent;
border-right: $arrow-size solid transparent;
}
Unfortunately, $arrow-size does not change according to the media query (my arrow is always 15px, even if my window is wider than 449px).
Any idea ? Or am I taking the problem the wrong way ?
As an alternative, try using the power of em's:
$arrow-size: 1.875em; // 30px, use pxtoem.com for conversion
div.selector {
height: 0px; width: 0px;
position: absolute;
bottom: 0px; left: 50%;
border-bottom: $arrow-size solid white;
border-left: $arrow-size solid transparent;
border-right: $arrow-size solid transparent;
}
#media only screen and (max-width: 449px) {
div.selector { font-size: 50%; }
}
Since the em is relative to the font-size, all you gotta do is play with that value to change the size of the arrow across different responsive states.
I would use a mixin:
#mixin arrow($size) {
border: $size;
}
Then you can use it in your media query like this (combined with a variable):
$arrowSize: 30px;
#media only screen and (max-width: 449px) {
div.selector {
#include arrow($arrowSize / 2);
}
}
div.selector {
#include arrow($arrowSize);
}
I think you did not understand how works SASS / Compass and media queries.
Variables are transformed by the compiler before being sent to the client as opposed to media queries that are interpreted by the browser's CSS engine as well as conventional selectors (id, class, tag)
The compiler does not interpret the media query as a condition, simply because at the time of compilation, the screen size is not defined, and especially because it is not his job.
Here is a simplified version of what happens:
1 $arrow-size: 30px; "ok, I set a new variable arrow-size to 30px"
3 #media only screen and (max-width: 449px) { "ok, a new selector...
syntax is correct, I'll look later if the brace is closed."
4 $arrow-size: 15px; "ok, I set the arrow-size variable to 15px"
5 } "ok, brace is closed"
...
13 border-bottom: $arrow-size solid white; "A new css rule, syntax ok... oh, I have to replace a variable ! How much for $arrow-size ? Oh yes, 15px, I change it."
In result, the compiled CSS file will be :
screen.css
#media only screen and (max-width: 449px) {
}
div.selector {
height: 0px;
width: 0px;
position: absolute;
bottom: 0px;
left: 50%;
border-bottom: 15px solid white;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
you can also put your media queries into selectors :
$arrow-normal-size: 30px;
$arrow-small-size: 15px;
div.selector {
height: 0px;
width: 0px;
position: absolute;
bottom: 0px;
left: 50%;
border-bottom: solid white;
border-left: solid transparent;
border-right: solid transparent;
border-width: $arrow-normal-size;
#media only screen and (max-width: 449px) {
border-width: $arrow-small-size;
}
}
or use a mixin :
a little bit useless in this specific case
#mixin responsive-border($max-screen-width, $border-width){
#media only screen and (max-width: #{$max-screen-width}) {
border-width: $border-width;
}
}
div.selector {
height: 0px;
width: 0px;
position: absolute;
bottom: 0px;
left: 50%;
border-bottom: solid white;
border-left: solid transparent;
border-right: solid transparent;
border-width: 30px;
#include responsive-border(449px,15px);
}
Example site
I have a site divided into your usual vertical sections. Header and footer both contain backgrounds with background-attachment: fixed. I have a slide-out nav, which you can see is activated on the first link. Everything works dandy except...
Issue:
Safari 6 (I'm not sure about 5.1, but it seems to be on Mac as my Windows Safari doesn't have the issue) has a nasty flicker upon animation. This can be resolved with the usual -webkit-backface hack HOWEVER upon using this, a new problem arises. The fixed background images start behaving very badly, and if you scroll/resize the browser enough, the images get distorted or content overlays improperly. Is there an alternative method I can use for this technique, or an actual fix?
HTML
<section>Hi CLICKME</section>
<section>hi</section>
<section>hi</section>
<section>hi</section>
<footer><p>I am some text</p></footer>
<aside class="menu">
I'm a menu.
</aside>
CSS
body {
background: #222;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
}
body.bump {
transform: translate(-258px, 0);
}
section {
background: #CBA;
color: white;
line-height: 450px;
font-size: 32px;
height: 500px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
z-index: 1;
}
section:nth-child(2) {
background: #FAFAFA;
}
section:nth-child(3) {
background: #CCC;
}
section:nth-child(4) {
background: #ABC;
}
section:first-child {
background: url(http://placekitten.com/1600/500) center top;
background-attachment: fixed;
-webkit-backface-visibility: hidden;
}
#media all and (min-width: 73.75em) {
section:first-child {
background-size: cover;
}
}
footer {
background: url(http://placekitten.com/1400/500) center top;
background-attachment: fixed;
color: white;
font-size: 32px;
height: 500px;
}
#media all and (min-width: 73.75em) {
footer {
background-size: cover;
}
}
footer p {
position: fixed;
bottom: 200px;
left: 0;
text-align: center;
width: 100%;
}
aside.menu {
background: #222;
color: #FFF;
height: 100%;
padding-top: 30px;
position: fixed;
top: 0;
right: 0;
text-align: left;
transform: translate(516px, 0);
transition: all 0.3s;
width: 258px;
-webkit-backface-visibility: hidden;
}
.bump aside.menu {
transform: translate(258px, 0);
}
JS (using Jquery)
$('section a').click( function(e) {
$('body').toggleClass('bump');
});
I did a workaround, by applying the fixed background to the body, wrapping everything in body in another div (animating that instead, so it wasn't affecting the body background) and the footer stayed the same, since having scrolled that far there is no way to pop the sidebar out anyway (so no animation flicker to worry about).
So i have a popup window with a scroller. For scroller i used basic css element overflow: scroll. But the problem is scroller appears on the side and on the bottom. Now i want to know if there is anyway to remove the bottom scroller, because even though its locked its useless to me and it would look better without it. Ive googled it and havent found anything so if you have a solution please share it. If you need any of the code tell me and i will post it.
This is "my" css for popup (i got the code from http://www.zurb.com/playground/reveal-modal-plugin):
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
height: 400px;
background: #eee url(modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
overflow:scroll;
}
.reveal-modal h1{
color: green;
font-size: 40px;
}
.reveal-modal strong{
font-style: inherit;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
a better way of doing it would be
overflow-x:hidden;
overflow-y:auto;
That way it means that if a page gets bigger with jquery and then you need to scroll the view won't get smaller and affect your measurements
This should work:
overflow-x:hidden;
overflow-y:auto;
Here is what i aim to do: https://docs.google.com/file/d/0B13W1jkpc_BzLXZ6RGxGbUd2NG8/edit?usp=sharing
Here is the CSS for my approach:
#media (min-width: 980px) {
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
a.menu:after, .dropdown-toggle:after {
content: none;
}
.navbar .dropdown-menu {
margin-top: 0px;
text-align: center;
}}
And the way it looks now: https://docs.google.com/file/d/0B13W1jkpc_BzZUlRck5VcWh0TkE/edit?usp=sharing
Everything is working fine except that i can't seem to get the right width for the dropdown menu's text (i need to shrink the width according to text). So how do i do that ?
You have to remove the min-width property of the .dropdown-menu list. Including the following after you include bootstrap:
.dropdown-menu {
min-width: 0px;
}
Alternatively, for the exact style you have given, you could use bootstrap's tooltips instead
Try removing padding from the .dropdown-menu .sub-menu classes.
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
padding: 0;
}
Well you can add space to your inner text and it will automatically increase its width e.g you have
"--View by Category--"
Add spaces with   as many as you want like
 --View by Category--