I have problem with my nav bar on a theme I am developing. http://astanmedia.com/blog All is ok at full screen, but reduce the screen size so the the menu collapses and when you click / touch the toggle button, the dropdown refuses to break over the slider, no matter what z-index is set, or positioning used. on scroll I have the nav change to fixed at the top, and it displays fine once the slider has passed it. The dropdowns also function fine over the slider at full screen. Have tried to paste code here for 15 minutes, I must be doing it wrong, so I have linked to a paste bin of the code here http://pastebin.com/6war9TGu. Thanks in advance
I think I see your problem. It's not the z-index, it's the navbar-collapse style.
You have:
.navbar-collapse { max-height: 50px; }
You need something like:
.navbar-collapse { max-height: 275px; }
According to the Google Chrome developer tools, you can find the .navbar-collapse style on line 106 of your style.css. In your Pastebin it looks like it's on line 94.
As a note, once you fix the .navbar-collapse max-height, you'll also need to add a background color to your .navbar .navbar-nav class so that the drop down menu doesn't have a transparent background.
I'm seeing a few other little things on your style that may need adjustment, but I'm going to assume that you'll ask specifically about these issues as you go. To fix the question you asked about, the navbar-collapse should help.
Related
I have this basic layout structure to control the general content width of all my website:
width: 90%
max-width: 1280px
Now I added an absolute positioned modal to my nav bar which should follow this positioning. I have an animated open close toggle in the nav bar and want the menu modal to always appear right below it.
I assume that I have to set the "right:" property accordingly. However I have a hard time to mathematically translate the above conditions to match the right: property.
Any idea for a suitable calc() code which does that?
My math skills fail me here. Help is much appreciated!
Working with plenty of calc() commands but unable to match the conditions.
What is the label/name of this HTML5 video control (inside the red outline)?
I'm assuming it's for the volume slider?
It appears when I roll over a blank area (that previously had the volume's Mute icon) next to the Full-Screen button. If I click it, it does nothing.
Problem:
I need to hide its visibility. I have used CSS to hide and customise other <video> controls, just unsure what this one is called.
Short version:
It is called -webkit-media-controls-volume-control-hover-background.
For future readers who want other specific options, try accessing <video> tag icons in your CSS as...
Volume icon (for mute/unmute):
video::-webkit-media-controls-mute-button { display: none; }
Volume slider (with range for loudness):
video::-webkit-media-controls-volume-slider { display: none; }
Volume slider's hover background (the dark bar in your shown picture)
video::-webkit-media-controls-volume-control-hover-background { display: none; }
PS: Or just hide the container of all these Volume icons...
Volume control container (for mute button, slider and slider background):
video::-webkit-media-controls-volume-control-container { display: none; }
The above examples should solve the problem, but read further below for extra details.
Full Answer:
"What HTML5 video control is this? I need to hide it. I have hidden and customised other controls, just unsure what this one is. I'm assuming it's for the volume slider (?). It is only happening in Chrome browser.".
Not sure how your code is setup but maybe something below is useful to solving your problem:
(option 1) Try to find out the labels/names from the Chrome source-code.
Search for volume in the text at: mediaControls.css.
Strangely though, they do not list -webkit-media-controls-volume-control-hover-background, the one simple thing that you needed. Still you'll learn something, such as... There is also a video::-webkit-media-controls-fullscreen-volume-slider which you might need to also handle when user goes to fullscreen mode.
PS: I say "might need" because I don't know how much you've already handled, but I see a fullscreen icon (in your shown picture) so be prepared for a possible "Round 2" of this issue when that FS button is pressed.
(option 2) Analyzing a <video> tag's volume icon (in Chrome's Developer Tools) we can see...
Moving the mouse "over" or "out" of the volume icon changes the class=.
class="closed" means only the volume icon is showing (for mute/unmute).
class="" means the volume slider/range part is also now showing.
<input type="range" step="any" max="1"
aria-valuemax="100" aria-valuemin="0" aria-label="volume"
pseudo="-webkit-media-controls-volume-slider"
aria-valuenow="100"
class="closed" style="">
<input type="button" pseudo="-webkit-media-controls-mute-button" aria-label="unmute" style="" class="muted">
You can see there are three pseudo names. One of these names is the one you want to hide that (unwanted) dark bar.
Either you want to make then hidden
Or you want to change their class= setting.
Test the options and ask anything if still stuck.
I'm using bootstrap with bootstrap-toc (https://afeld.github.io/bootstrap-toc/)
Working with the following scenario:
http://jsbin.com/cerozeleya/edit?output (make sure to click "run with Js" to be able to see the sidebar)
As I scroll the view, I would like the sidebar to scroll until a point where the jumbotron is no longer in view. At that point, it should stay affixed while the content scrolls.
I can't get that behaviour to happen with the included jsbin. I tried messing with the data-offset-top/data-offset-bottom attributes within my nav #toc but nothing changes. I found another question here that instructed the following changes on the css:
.affix{ top: 0px;}
.affix-bottom{ position: absolute;}
But that didn't work either. I tried reading the affix and scrollspy documentation, but its either not clicking with me, or I'm not seeing what I'm doing wrong.
Any help appreciated. Thanks!
You have to use data offset top within the tag which you want to affixed
data-spy="affix" data-offset-top="197"
Eg.
<nav id="toc" data-toggle="toc" data-spy="affix" data-offset-top="197"></nav>
Edit the offset value according to your needs
What I am trying to do is get the grey boxes on this to go to the edge of the page, I have found a similar article here but when I have tried changing the margin and padding to 0 nothing is happening, this table is created in a cms that has been coded by previous developers and I have no idea why I can't get these grey areas to automatically fill the edge of any size screen.
Any help on where I am going wrong would be grateful as I am re-developing this website and need it done ASAP
you will have to remove the width of the wrapper to auto
then add to your content2 div something like: padding: 0 200px; for the gray only
Your #wrapper style is set to width: 970px. Change that to width: auto and you're good to go.
if you are talking about the box shown in blue below
is because the table is been redered inside the <div id="wrapper">
if you change the width: of the DIV to auto.... your boxes will go all the way to the edge as shown on the other image
after changing the width to auto of the wrapper div looks like:
I posted this a week or so ago:
Position simplemodal modal on top of an existing div
and thought that I had solved my problem, but when the window is scrolled, the modal container moves.
I think I need to change it from fixed to absolute positioning, but when I change it in the script, the right side of the container lines up with the left side of the div (but it does stay in the same place vertically).
Here's what I'm doing now:
$('.slider-caption #large-spot-two').click(function (e) {
$('#basic-modal-content-two').modal({appendTo:"#slider1", autoPosition: false});
return false;
});
What's the best way for me to keep the modal container above the div, whether the page is scrolled or not?
Thanks,
Wendy
The plugin was created to be fixed (not move when the page is scrolled, etc.). Changing the CSS position works until the page is resized or scrolled, as you have found.
The code required to change that behavior would require more work that I currently have time for. You might try BlockUI, as it sounds like that would fit your needs better?