I have a navbar set to a fixed position at the top of the screen with a z-index of 1. When I click my iframe to be in full screen mode the navbar still sits on top of the iframe. How do I hide my navbar or move my iframe to the front when I put it in full screen mode?
You can do this two ways, either:
1) Hide the navbar
#navbar{
display: none;
}
or...
2) Put the iframe above the navbar using the z-index property
iframe{
z-index: 2;
}
Here is an example of the second method being applied using jQuery by adding a .fullscreen class: https://jsfiddle.net/gyq7tv9h/
Related
I am using Invisible ReCAPTCHA for my WordPress CF7 forms. The Advanced Captcha settings allow for positioning the badge either at bottom-right, bottom-left, or inline. I like the compact display of just the badge icon with a bottom setting, but I don't like its sticky nature scrolling with the viewport, especially on narrow mobile devices. The inline setting positions the captcha at the bottom of my form just above the Submit button, but unfortunately, it is displayed in its full, expanded state. Can anyone suggest CSS to either:
1) Use bottom-right setting and prevent it from scrolling?
2) Change inline setting to display only the Badge icon (with protected by content revealed on hover)?
Screenshots
I figured it out!
Go to Invisible Recaptcha's Advanced Settings panel, select Badge > bottom-right.
To your CSS stylesheet, add:
.grecaptcha-badge {
width: 70px !important;
height: 60px;
position: static !important;
float: right !important;
transform: translateY(12px); /* Bottom-aligns badge icon & CF7 submit button.
Your value may need to be different */
}
.grecaptcha-badge:hover {
width: 256px !important;
}
I'm making a website DEMO using Bootstrap Framework and AOS - Animate on scroll library.
In desktop I had to change some animations because they increased the width the page, with a horizontal scrolling.
For the mobile I have the same issues, but now I don't understand if the problem is caused from the animations or something else, I see the navbar larger.
Here is the link: https://doc.digitalsolutioner.com/
I've tried to fix wider elements like the navbar, but the issue remains.
I have seen in other issues similar about rows without containers, but it's not the case.
I want to have the right width on the mobile, with no horizontal scrolling.
the culprit is the following class inside the footer... to check: go to the bottom of the page; do inspect element; remove this property (in browser developer tools) to see how it is causing the horizontal scroll to appear
[data-aos^=fade][data-aos^=fade].aos-animate
{ transform: translateZ(0); }
simplest way to solve this will be to hide overflow-x property against your body. This css will be the simplest way to get the fade effect without seeing the scroll at the bottom:
body {
overflow-x: hidden;
}
Update:
on mobiles and mobile emulators, a horizontal bar appears... this was due to margins on the card-service class, just remove the margin-left and margin-right properties in the media-query (as shown below) to resolve this.
#media (max-width: 576px){
.card-service {
/* margin-left: 15px; */
/* margin-right: 15px; */
margin-bottom: 25px !important;
}
}
In AOS there is problem, when you cant set initial position of your element, Its set to the default position.
Like in fade-left default position is right: 0 so whenever you call fade-left its start from 0 and its create screen overflow.
So there is two option here,
Don't use fade-left
Set initial value of the element
Using bootstrap 3, i am facing problem with disabling the body scroll when the collapsible nav-bar menu is open in mobile devices. when the collapse menu is open and if we swipe over it, the background element also starts scrolling which i don't want. i want that background element should not scroll when we swipe over the collapsible menu. The same problem is also seen in desktops.
One way to accomplish this with CSS is to disable the overflow of the html and body elements.
html, body {margin: 0; height: 100%; overflow: hidden}
<!-- Example HTML which would normally create a scrollbar -->
a<br><br><br><br><br><br><br><br><br><br>
b<br><br><br><br><br><br><br><br><br><br>
c<br><br><br><br><br><br><br><br><br><br>
d<br><br><br><br><br><br><br><br><br><br>
You could create a class called no-scroll and apply it to html and body when you open the menu. Remove the class when the menu closes.
I'm trying to create a Boostrap UI where the Desktop view (>= 992px) will have a logo just above the NavBar. I created the following fiddle:
http://jsfiddle.net/4qd79699/
To place the logo where I want, I have the following CSS:
.navbar {
top: -40px;
}
However, as you can see (you might need to expand result view to 992px) the logo is placed behind the NavBar (which makes sense). Now, how can I put the logo on top of the NavBar while being able to click the links?
I have tried adding the following:
.navbar {
top: -40px;
z-index: -1;
}
Then it is displayed as I want but I can't click the links on the NavBar. For some reason I wasn't able to bring the logo "up" by switching its z-index.
Just add a position:absolute; to the anchor holding your image and you can adjust the margin of your image accordingly after.
Here's a jsfiddle of it: http://jsfiddle.net/o49v85Lh/1/
for the image add a the style display:block; and remove the navbar top:-40px
Here is my JSFiddle for full code example.
Notice how you can hover over that orange road glyphicon and it correctly displays my popover? Well, when I shrink the width of the Result section down to the point that the menus stack vertically, and then I hover over the popover, it doesn't render. To me, this means it won't render when a user is viewing my app from a mobile browser.
I tried:
#fieldMode .popover {
min-width: 300px
}
#fieldMode .popover-title {
color: rgb(255,102,0);
background: rgb(176,205,249);
}
#fieldMode .popover-content {
color: rgb(12,66,144)
}
...but that doesn't seem to work. What's the fix?
On mobile, your a tag is given display: block by the bootstrap styles, causing to to be 100% width. This won't work if you're trying to position the popover to the right of it. Adding display: inline-block will cause it to only take up the space it needs instead of the full screen width. Updated fiddle: https://jsfiddle.net/mgup49hv/1/
#fieldModePopover {
display: inline-block;
}