I am trying to have a menu bar to get stick to top when user scrolls up. It sticks fine at the top. But, it floats to left.
code: http://www.bootply.com/y801SV4HAu
How to fix menu so that if sticks to top and center (margin-left is currently set to auto to make it center)?
<div class="container" style="padding:0">
<div id="menu-header" class="affix">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<span style="color:white">Menu bar here<i class="glyphicon glyphicon-menu-right"></i></span>
</div>
</div>
</div>
</div>
The above does what you want it to do. Cassie was correct in suggesting a container div, but with the added style padding:0 for the way you want it to look. so that it aligns with page title.
When position: fixed is applied to the header upon scrolling down, the margin: auto no longer affects it, so it moves back over to the side. You'll have to find another way to center that div. There are probably a ton of ways to do this; the simplest offhand might be to put it inside a .container div.
Related
There is an issue with Bootstrap 4 and Safari brower on Mac.
When using cols inside a row it breaks it, and doesn't work like on firefox or chrome. I'm using a simple code like this:
<div class="row align-items-center">
<div class="col-sm-12 col-md-3 hidden-xs align_left"><h3>TEXT</h3></div>
<div class="col-sm-4 col-md-3">TEXT</div>
<div class="col-sm-4 col-md-3">TEXT</div>
<div class="col-sm-4 col-md-3">TEXT</div>
</div>
I'm trying different 'fix codes' from another questions but they doesn't solve the problem. Any clue?
Thanks in advance
Finally solved the problem with this simple CSS:
.row:before, .row:after {display: none !important;}
It seems there is some code hidden in :before and :after elements inside the rows. This causes some kind of issues in safari browsers.
Hope it helps.
.row:before, .row:after {width:0px; height:0px;}
There is a reason for display:table before and after row.
By using display:none, the row will not preserve its height depending on the elements inside it, and row height is now 0px because the columns inside is floating..
I have something like this:
<div class="panel">
<div class="panel-body">
<div class="image-overlay">
<img class="img-responsive"> src="..."/>
</div>
</div>
</div>
and if I set manually height of "panel-body" to 400px. Its working as it should.
However once opening on small display height stays 400px but image is resized to smaller and half of panel is empty. How can I have responsive image in panel with also panel responsive?
can you try not to put any dimension? try to check this one
https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
I'm not sure I understand your question, but I think you're probably looking for this:
<img src="/mysrc.jpg" style="width:100%;max-height:400px;" />
I'm trying to use Skrollr to fix an element to the bottom of the viewport, if the bottom of the element hits the viewport bottom. This part is fine.
The problem is, after - lets say 1000px - of scrolling, i want to continue the scrolling, while i change the above mentioned fixed element to static again.
<div class="header">Header</div>
<div class="height-placeholder" data-anchor-target="#fixed-element" data-0-bottom="display:none;" data--0-bottom="display:block;"></div>
<div id="fixed-element" data-0="#class:;" data-bottom="#class:stuck;" data-1000="#class:;">Fixed at the bottom for a while</div>
<div class="content">
Regular content...<br>
</div>
http://jsfiddle.net/bkccg8x5/2/
So my idea was to create a placeholder above the fixed element and when the fixed element is stuck to the bottom, i simply add this element, so when i unstuck the fixed element, it would continue to scroll normal without any jump.
The problem with this solution is that i defined a fixed height for the placeholder, and this way it will only work correctly at a certain viewport height. Makes things more complicated, that every element on the site has a fluid height, so i need a solution that will work in every resolution.
Any ideas?
I solved this by creating a 1000px tall container and when the bottom of the container is hitting the bottom of the viewport, i change the fixed element to absolute.
<div class="header">Header</div>
<div id="height-placeholder" data-0="#class:;" data-bottom="#class:unstuck;">
<div id="fixed-element" data-0="#class:;" data-bottom="#class:stuck;">Fixed at the bottom for a while</div>
</div>
<div class="content">
Regular content...<br>
</div>
Here is the demo, works fine with any height:
http://jsfiddle.net/bkccg8x5/3/
I am attempting to put a weekly agenda in a row of thumbnails using Fullcalendar, but the resizing doesn't seem consistent.
1) On my work monitor, the agenda table renders correctly at full screen width, then changes to being taller than the neighboring thumbnails when the screen is narrowed, and then returns to correct rendering at full width. It also renders correctly when in mobile emulation and the row switches from horizontal to vertical configuration. The screen resolution is 1920x1080.
2) At home, the agenda renders initially as taller than the neighboring thumbnails at full width, then remains taller as the horizontal dimension decreases, renders correctly in mobile emulation, then renders correctly when the screen is restored to full-width. Screen resolution is 1366x768.
The base dimensions of the neighboring images are 465x300.
Relevant code bits. The jQuery calling the calendar (in the $(document).ready() section).
$('#calendar-index').fullCalendar({
defaultView: 'basicWeek',
height: $("#imgSource").height(),
width: $("#imgSource").width(),
windowResize: function(view) {
this.height() = $("#imgSource").height();
this.width() = $('#imgSource').width();
}
});
The HTML section:
<div class="row">
<div class="col-md-4">
<div class="thumbnail text-center"><div id="calendar-index"></div>Button Text</div>
</div>
<div class="col-md-4">
<div class="thumbnail text-center"><img id="imgSource" src="image1.png">Button Text</div>
</div>
<div class="col-md-4">
<div class="thumbnail text-center"><img src="image2.png">Button Text</div>
</div>
I've got a feeling that connecting it to a $("#imgSource").load() rather than $(document).ready() call would work, but I'm avoiding using deprecated functions if possible.
http://jsfiddle.net/sidhenimh/63e0h54o/
I found a fix for this, in case anyone else runs into a similar issue; it doesn't work perfectly, but it does at least make the horizontal scaling a lot more stable. There's a free jQuery plugin called "Datatables" that enables automatic horizontal scaling. Vertical scaling doesn't work still, but the table at least displays correctly initially regardless of monitor resolution/size.
Datatables Plugin
Okay, I started exploring Bootstrap and in that process, constructed the basic navbar that is at the top of the page. But when I follow the demo code that bootstrap has provided on their page and create the navbar, what happens is that the "Brand" text goes to the very left of the bar that is close to the edge of the page (on the desktop). I am attaching the image below that shows what I mean:
Here is the snippet of the relevant code:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
So I would like to offset the "Brand" a little bit of however much I want to the right.
Also similarly you could see in the above image that the "Link" and "Dropdown" at the very right of the bar. How do I offset it to the left?
Or in other words I would like to have the text/logo in the bar begin and end with offsets instead of sticking to the extreme left and extreme right.
To my surprise, when I look at the sample Bootstrap pages, for example take a look at this page the text on the top navigation bar ("Project name") is offset from the right and the left and I don't see anything special they have done to do the offset. But when I use the same code, it shows up at the very edge.
Oh, wait, I see that they have used
<div class="container">
whereas I have used
<div class="container-fluid">
So it seems like using "container" gives the offset, whereas using "container-fluid" pushes it to the extremes of the bar?
But regardless, how do I create offset (by a certain amount on the left and right) as I wish?
#jorn - thanks for your response. Unable to add this to the comment section, hence editing the posting to add my question:
I added it to the CSS and it is working and now offsetting it by 50 px. That is good. Similarly I added the 50px offset to navbar-right and it is creating offset at the right too. But now the challenge is how do I EXACTLY vertically align this Brand to the first column in the body below for which I have used the following code:
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
Now given we are using 50 px; for the Brand offset, but using "div class="col-md-10 col-md-offset-1"> for the body column, how could I guarantee that there is absolute vertical alignment between the Brand and the first column of the body? Right now, it doesn't seem to align, as shown in the image below:
I don't want to be doing guesswork on how much value I should define in for the offset i.e. say 50 px; or 49 px; or 39 px; etc. - is there another absolute sure way to define the offset of the brand in such a manner that it automatically aligns? Thanks.
Edit 2:
Looking at the CSS code I figured this:
.col-md-offset-1 {
margin-left: 8.33333333%;
}
Then accordingly to my style.css I added:
.navbar-brand {
margin-left:8.33333333% !important;
}
But in spite of this, the Brand and the body's first column aren't aligning as shown in the image below:
Any idea why there is still mis-alignment? Thanks.
You can just use margin-left, here's a fiddle
.navbar-brand
{
margin-left:50px !important;
}
EDIT
I'm sorry it took a while, but I've reworked the fiddle. You can find the answer here.
.navbar-header{
width:200px;
margin-left:8.3333% !important;
}
.content{
margin-top:100px;
}
The margin left from the offset had to be on the navbar-header instead of the navbar-brand. I hope this helps you for your project.