I have a navbar-toggle menu that, when opened, opens at what looks like 90% width then slides right to fill the screen! I cannot work out what the issue is here: http://www.bootply.com/ZanQBWTECu
Also in desktop view in the same example I have a nav-pills nav-justified menu that, when you hover over a button, increases in height to give the impression of a button moving down however when I click on one of the submenu options it jumps back to its original height.
How do I get the button to remain at the increased width?
remove
.nav {
letter-spacing: 1px;
position: absolute;
top: 0;
left: 0;
z-index: 20;
}
replace with
#rickwoodcollapse {
width:100%;
padding:0;
}
here is a bootply -
Related
I have a div, that has full width (100vw) and used a translate in order to place it centered. This is because it’s parent has no full width. If I now add a child with a background image and background-attachment: fixed;, this background image is misplaced in Safari on macOS.
It seems to me that the background image is placed as if the translate on its parent is not active (and thus shows only the right half of the image, since the left part is hidden.
.alignfull {
left: 50%;
max-width: none;
position: relative;
transform: translate(-50%);
width: 100vw;
}
.background {
background: url("https://via.placeholder.com/1800x800") fixed center center / cover;
height: 400px;
width: 100%;
}
<div class="alignfull">
<div class="background">
Test
</div>
</div>
I already tried to change many things but don’t get it working. It seems to be a bug in Safari, but hopefully anyone has an idea how to fix it without waiting for a fix from Apple.
Since the .alignfull is used in rather many places, it’s currently no option to change its CSS.
I'm trying to achieve something very simple with WinJS. I want the items in a listView to occupy the full height of the viewport.
I can achieve this by overriding the default styles for the listView like this:
.win-itemscontainer {
width: 100% !important;
height: calc(100vh - 1px) !important;
}
.win-horizontal .win-gridlayout .win-container {
height: calc(20% - 1px);
margin: 0 0 1px 1px;
outline: none;
}
.win-listview {
height: 100vh;
margin: 0;
padding: 0;
}
.win-listview .item {
width: 250px;
}
This works fine and renders 5 rows of list items. The list then scrolls if the number of items exceeds the containers width.
However, there are some very odd behaviours occurring. If I scroll to the very end of the listView, something causes the scroll position to jump back making the last row in the listView unattainable because the jump prevents me from ever reaching it.
Is there a better way of achieving what I'm after or is there a way to fix what I've implemented?
I was never able to sufficiently answer this so I switched from a listView to a repeater which gave me greater control over the markup and CSS.
I custom styled the buttons of a Colorbox lightbox on this page (click the image to load).
There are gray buttons (two arrows and an X) that do not appear in Safari (7.0.1) but appear in Chrome and Firefox.
Using web inspector to change the background to a color has no effect either.
CSS of one button:
#cboxNext {
position: fixed;
top: 47%;
right: 18px;
width: 22px;
height: 32px;
background: url("buttons.png");
background-position: -42px 0;
background-repeat: no-repeat;
background-color:white;
}
The .png sprite file and stylesheet are in the same directory.
Updating to the latest Colorbox version didn't help (I reverted back to older version).
I read here that Safari in the past had issue with the background shortcut
syntax, hence the long form.
Any help is much appreciated!
Fixed.
The position:fixed buttons were child elements of a container that had overflow:hidden. Unlike other browsers, Safari seemed to hide the buttons inside their parent.
So got a problem with Flexslider. Seems to be adding a gap of about 50 pixels (stretching the page) to the right of the page. If you hover over the slide, the gap disappears. It is really strange. Any ideas?
I know it is nothing else on the page because if I take out the flexslider code, it seems to work fine.
Thanks for your help.
Looks like the flexslider navigation controls are adding in the extra space. When you hover over the slider, the "right" directional arrow comes into view and is therefore not off the screen, and thus, not adding extra space.
Adding "overflow: hidden" to your flexslider class should resolve your problem here.
Changing these styles in flexslider.css:
from
.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; text-align: right; }
to
.flex-direction-nav .flex-prev { left:0; }
.flex-direction-nav .flex-next { right: 0; text-align: right; }
worked for me.
I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great help to me.
In your CSS, add
position: fixed;
to your header element. It's just that simple, really.
And next time, try to use right click on something you see on website and choose "Inspect element". I think that every modern browser has it now. Very useful function.
If you want to make it sticky when it's scroll down to a certain point then you can use this function:
$window = $(window);
$window.scroll(function() {
$scroll_position = $window.scrollTop();
if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
$('.your-header').addClass('sticky');
// to get rid of jerk
header_height = $('.your-header').innerHeight();
$('body').css('padding-top' , header_height);
} else {
$('body').css('padding-top' , '0');
$('.your-header').removeClass('sticky');
}
});
And sticky class:
.sticky {
position: fixed;
z-index: 9999;
width: 100%;
}
You can use this plugin and it has some useful options
jQuery Sticky Header
CSS already gives you the answer. Try this out
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
now add the class sticky to any menu sidebar or anything you want to stick to the top and it will automatically calculate the margin and stick to the top. Cheers.
If you want simplicity in a HTML and CSS option to create a Stiky NavBar you can use the following:
Just create a navbar like this one:
<nav class="zone blue sticky">
<ul class="main-nav">
<li>About</li>
<li>Products</li>
<li>Our Team</li>
<li class="push">Contact</li>
</ul>
</nav>
Remember to add the classes in this case I created a Zone (to separate my HTML in specific areas I want my CSS to be applied) blue (just a color for the nav) and sticky which is the one that gonna carry our sticky function. You can work on other attributes you want to add is up to you.
On the CSS add the following to create the sticky; first I am gonna start with the zone tag
.zone {
/*padding:30px 50px;*/
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
now with the sticky tag
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Position fixed meaning it will always be in the same position; and with top 0 I will always be at the top and a 100% width so it covers the whole screen.
And now the color to make our navbar blue
.blue {
background: #7abcff;
You can use this example to create a sticky navbar of yours and play around with the CSS properties to customize it to your liking.
Try This
Add this style to the corresponding
style="position: fixed; width: -webkit-fill-available"
OR
<style>
.className{
position: fixed;
width: -webkit-fill-available;
}
</style>