I have a hamburger button that opens up a mobile nav. When it closed it scrolls with the page, but when open I need to it scroll with the mobile-nav but it have sticky property still. The button appears inside dropdown menu on mobile version and must be on the top of it after scrolling.
`
.menu-btn--mobile {
position: relative;
display: inline-block;
z-index: 5;
&:after {
#include icon-base;
#include icon('hamburger', rem-calc(36), $color-white);
position: relative;
background-color: $color-maroon-light;
background-size: rem-calc(15);
content: '';
}
}
&.menu-hide--mobile {
.mobile-menu {
right: -100%;
}
}
&.menu-show--mobile {
.menu-btn--mobile {
&:after {
#include icon-base;
#include icon('hamburger', rem-calc(36), $color-white);
background-color: $color-red;
background-size: rem-calc(15);
content: '';
}
}
}
`
I've changed css but it still have the same property as on desktop version.
Related
I am trying to get my top menu to be exactly full width of the screen at all times. Sadly, while it works OK on desktop, it keeps extending beyond the expected width when on mobile.
To give some context: I'm trying to build a child theme of the "Rookie" theme (https://wordpress.org/themes/rookie/).
My goal at this point is to replace the default menu of the theme with a top bar, on which I want the burger menu on the left, logo in the middle and the search button on the right.
This is already done, but for a reason I do not understand, when testing on mobile, the top bar is exceeding the expected 100% width. This can be observed when trying with "Phone 6/7/8" of the Chome dev tools. I also tried with a physical device and got the same result.
The page is https://gornik2.kosimus.eu/
Picture from the dev tools
I spent several hours trying to figure it out and I essentially ran out of ideas at this point. I defined the width to 100%, 100vw and so on, tried max-width, checked parent elements and made sure that the width is not increased anywhere.
Pretty sure there is something incredibly stupid and small I am missing. Ideas would be greatly appreciated.
Thanks!
PS There is a bunch of other issues as well on that page (colors etc.
- please just ignore those).
/* Make sure that the header is full-width */
.site-header {
width: 100%;
}
#masthead {
width: 100%;
}
/* Get rid of the horizontal unordered list menu. Always use the mobile-like hamburger menu. */
.main-navigation ul {
display: none;
}
.main-navigation.toggled .nav-menu {
display: block;
background: #000000;
}
.main-navigation li {
float: none;
}
/* Menu bar to the top */
.main-navigation {
display: block;
position: fixed;
top: 0;
height: 65px;
width: 100%;
}
/* As the top bar is 65px high, the open menu should have exactly that margin, so that they don't overlap */
.main-navigation.toggled .nav-menu {
margin-top: 65px;
}
/* Display navigation over other stuff */
#site-navigation {
z-index: 100;
}
/* Top bar styling */
/* Hamburger menu */
.main-navigation .menu-toggle {
/*Send the whole button to the left*/
display: inline-block;
width: 20vw;
height: 65px; /* Set the height of the whole top bar to 65 pixels */
background: #ffffff;
position: fixed;
top: 0;
left: 0;
}
.main-navigation .menu-toggle .dashicons {
display: inline-block;
color: #000000;
position: relative;
left: 27%; /*Required to be positioned properly on the white bg*/
font-size: 4rem;
vertical-align: baseline;
}
/*White BG for the hamburger button*/
.main-navigation.toggled .menu-toggle {
background: #ffffff;
}
/* We're using the full screen search from a plugin, so the field here is not necessary */
.main-navigation .search-form .search-field {
display: none;
}
/* Search button */
.main-navigation .search-form .search-submit {
display: inline-block;
width: 20vw;
height: 65px;
background: #ffffff;
color: #000000;
position: fixed;
top: 0;
right: 0;
padding: 8px 16px;
}
.main-navigation .search-form .search-submit:hover {
background: #ffffff;
color: #000000;
}
.main-navigation .search-form {
display: inline-block;
margin: 0;
}
.main-navigation {
background-color: #1a754a;
}
/* Logo centering and styling */
.site-branding {
display: inline-block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: calc(50% - 32.5px);
z-index: 110;
}
.site-logo {
margin: 0px;
float: none;
}
.site-logo img {
max-height: 65px;
}
.site-content {
margin-top: 65px;
}
The pseudo element (:after) added to th tag of the LEAGUE TABLE is causing this issue. This issue can be fixed if the position value changed from "absolute" to "relative".
.sp-data-table .sorting:after {
content: "\f156";
color: transparent;
/* position: absolute; */
position: relative;
}
Screenshot
I made modal in React and it's working fine, but I really want to add one small feature. When I'm clicking on button, class of modal is changing and modal is becoming visible, but this happens immediately and I want to add some transition.
My code:
In parent method toggling class and passing props:
toggleModal() {
this.setState({ visibleModal: !this.state.visibleModal });
}
<RegisterModal
visible={this.state.visibleModal}
toggleModal={this.toggleModal}
/>
Children component:
<div className={`modal ${props.visible ? 'modal--visible' : 'modal--invisible'}`}>
My CSS:
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
}
.modal--invisible {
display: none;
}
.modal--visible {
display: flex;
}
Can someone help me?
Possibly related
The display property can't change smoothly, it only has fixed values. It jumps instantly from one to the next. You need to use transition and something like opacity to get a nice fade in.
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
transition: opacity .5s; /* Opacity will fade smoothly */
}
.modal--invisible {
opacity: 0;
pointer-events: none; /* Makes the modal unclickable */
}
.modal--visible {
opacity: 1; /* Modal is visible */
pointer-events: initial; /* Modal is clickable */
}
I am making a side navigation that pops out and that works fine, but the issue is when that pane appears (using translate3d), when scrolling using an iPhone or emulation mode in Chrome, it will scroll the <body> behind it, it is as if my finger presses through the layer.
On desktop browsers at mobile width it works exactly as intended. The navigation appears, scrolling is locked to the navigation pane and the background elements are not scrolled.
I feel this may be due to translate3d and how it interacts with z-index? But that's a poorly educated guess.
Here's what I am working with:
.side-nav--fixed {
position: fixed;
width: 230px;
#include media-query(palm) {
width: 100% !important;
position: fixed !important;
top: 125px; right: 0; bottom: 0; left: 0;
z-index: 5555;
background-color: #fff;
overflow-y: scroll;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
#include transform(translate3d(-100%, 0, 0));
#include single-transition(transform 1s ease-out);
#extend %ui-shadow;
&::-webkit-scrollbar {
display: none;
}
&.animate {
#include transform(translate3d(0%, 0, 0));
#include single-transition(transform 1s ease-out);
}
}
}
.no-scroll {
position: fixed;
}
$('body').on('click', '.js-side-nav-toggle', function(ev) {
$('html, body').toggleClass('no-scroll');
});
To quickly summarise: I bring in a layer using translate3d, I then want to restrict scrolling and ontouchmove events to that layer and all elements behind it to be ignored.
Thank you for your time.
Edit:
I managed to fix this by adding position: fixed; to .no-scroll which was applied to html and body when the menu toggle was clicked. I updated my code above with working code.
I managed to fix this by adding position: fixed; to .no-scroll which was applied to html and body when the menu toggle was clicked. I updated my code above with working code.
.side-nav--fixed {
position: fixed;
width: 230px;
#include media-query(palm) {
width: 100% !important;
position: fixed !important;
top: 125px; right: 0; bottom: 0; left: 0;
z-index: 5555;
background-color: #fff;
overflow-y: scroll;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
#include transform(translate3d(-100%, 0, 0));
#include single-transition(transform 1s ease-out);
#extend %ui-shadow;
&::-webkit-scrollbar {
display: none;
}
&.animate {
#include transform(translate3d(0%, 0, 0));
#include single-transition(transform 1s ease-out);
}
}
}
.no-scroll {
position: fixed;
}
$('body').on('click', '.js-side-nav-toggle', function(ev) {
$('html, body').toggleClass('no-scroll');
});
So I made this: http://jsfiddle.net/RaV3u/5/
...but haven't been able to figure out how to make the slides loop -- that is, when the last slide finishes, it continues from the first, and the same for the first slide going backwards.
Does anyone have an idea how to do this?
/* THUMBNAIL SLIDER IMAGES
------------------------------------------- */
.slideshow {
height: 200px;
position: relative;
overflow: hidden;
}
.images {
position: absolute;
left: 0; /* Change this value to slide */
top: 0;
height: 100%;
width: 300%;
z-index: -1; /* send this layer behind the .circle layer */
}
/* THUMBNAIL SLIDER NAVIGATION
------------------------------------------- */
.thumb-slide-nav-wrapper {
margin: 70px 15px; /* position of the nav buttons */
overflow:auto;
}
.circle-left {
/* position of the nav buttons */
float:left;
}
.circle-right {
/* position of the nav buttons */
float:right;
}
.circle {
/* nav buttons */
z-index: 1;
border-radius: 50%;
width: 60px;
height: 60px;
background: green;
}
a .circle:hover {
background: lightgrey;
}
Thanks.
Demo
In Your JavaScript Just check whether the end (first or last image) is reached before sliding it.
To get total count of images use: var tot=$(".images").find("img").length;
and use a counter variable i to check the direction of sliding and end image reached or not condition.
So here is your changed JS/JQuery:
$(document).ready(function() {
var tot=$(".images").find("img").length; //total images in slider nav
var i=0; //acts as a counter
var thumbSliderPos = $(".images").css("left");
// Detect thumbnail nav button clicks
$('#circle-left').click(function() {
//Detect if first image is reached?
if(i<=0){
i=tot-2;
$(".images").animate({
"left": "-="+(400*i),
}, 400);
//Yes Show last image
}
else
{
$(".images").animate({
left: "+=400",
}, 400);
i--;
}
});
$('#circle-right').click(function() {
//Detect if last image is reached?
if(i>=tot-2)
{
$(".images").animate({
left: "0",
}, 400);
i=0;
//Yes Show first image
}
else
{
$(".images").animate({
left: "-=400",
}, 400);
i++;
}
});
});
To make it autoSlide after page loads Here is another:
Demo
Hope it Helps you. Cheers :) !
I'm trying to make the controlbar bigger for ipad/android. Especially the fullscreen
button. When changing the css it's bigger but work functioning for the whole rectangle e.g.
Any ideas?
ciao Valentijn
this solution is css only.
i simply resized the all elements inside a media query, also the buttons css sprites/background images by simply adjusting the background-size and background-position properties.
the following styles are for the play, pause, fullscreen and unfullscreen buttons only, but you get the point and should be able to complete the missing buttons.
#media only screen and (min-width : 1824px) {
.mejs-container .mejs-controls {
height: 60px;
}
.mejs-container .mejs-controls div {
width: 60px;
height: 60px;
}
.mejs-controls .mejs-time-rail span {
height: 40px;
}
.mejs-container .mejs-controls .mejs-time {
height: 40px;
}
.mejs-container .mejs-controls .mejs-time span {
font-size: 20px;
line-height: 40px;
}
.mejs-controls .mejs-button button {
width: 46px;
height: 46px;
background-size: 400px;
}
.mejs-controls .mejs-play button {
}
.mejs-controls .mejs-pause button {
background-position: 0 -44px;
}
.mejs-controls .mejs-fullscreen-button button {
background-position: -90px 0;
}
.mejs-controls .mejs-unfullscreen button {
background-position: -90px -44px;
}
}