I'm using Bootstrap and a navbar with navbar-fixed-top class on it.
Below that is a div with an image inside (full width of the screen, height 400px).
The problem is that, since my navbar has a background-color, the navbar goes onto the image. I tried to add a margin-top:80px on the image, it works fine, but when I go below 769px x XXXpx, a space appears between my navbar and my image. I know this space is coming from the margin-top when resizing the window, but what could I do to set the image below the navbar without adding a margin-top for it to appear correctly ?
I thought this was simple issue so I didn't add code to my post, I will if needed.
Try to wrap CSS rule for image in
#media (min-width: 768px) {
your CSS rule for image margin-top: 80px here
}
Related
I am using “navbar fixed-top” from Bootstrap. And underneath it I have a container. What I noticed is whenever I scroll down the page, the container underneath the navbar starts to slide below the navbar (refer to attached photo). I am aware that this is an expected behaviour with fixed-top, but I am wondering is there away to always keep the container below the navbar fixed to its bottom even when the user scrolls down?
Get the height of your fixed element, let's say 50px, and then:
body {margin-top:50px}
Please add the header height as the margin-top of the container.. for example..
css
.container {
margin-top:100px; /*height of the header*/
}
OR
JQUERY
var headerheight = jQuery('header').outerHeight();
jQuery('header').css("margin-top",headerheight);
In my page I am using Left navbar, So when I expand and collapse the navbar, one the div width getting changed. Due to that change the entire design getting change.
When Navbar is collapsed
When Navbar is Expand
It is working perfectly when the left navbar is Expand.
So I want to keep the background width should same when the navbar expands or collapse.
Please reread your question and add more information and apply proper english please. Do you seek a solution with javascript or pure css?
Does the navbar collapse because of css media queries?
In that case you could use the following .scss solution to apply background property changes according to your screensize:
$widthMedium: /*apply amount of pixels of media query of collapsable nav*/ px;
#mixin on-max-widthMedium {
/* Do max-width for a behavior on a width below a certain limit */
#media (max-width:$widthMedium) {
#content;
}
}
.classYouWantToChangeWhenNavBarIsNotCollapsed {
#include on-max-widthMedium {
// For example:
background-size: contain;
}
}
I'm having a difficult time getting a NavBar to render what I have in mind.
I need a navbar with an increased height (reason because my brand image has a bigger height than the default).
But I also need all menu elements (BUTTON, LI, A, FORM ELEMENTS, NAVBAR-TEXT, NAVBAR-RIGHT) to respect the new height and to properly vertically center in the navbar.
Can someone provide some example HTML/CSS for what needs to be changed?
I have done lots of searching online and there seems to be nothing obvious.
The BootStrap site shows documentation on how to define a navbar, but nothing that I could find regarding height changes.
If you are putting your brand image within the navbar-brand div then you can change the height to the height you need (or height of the brand image) using css:
.navbar-brand {
height: 80px;
}
To align the navbar elements vertically you can give the navbar a top margin to what you need also using css:
.navbar-nav {
margin-top: 40px;
}
You will have to use css breakpoints if these need to be changed for smaller devices.
I am having some troubles here: http://test30.hscreativedev.co.uk/index2.html
When the width of the window reduces (#media (max-width: 768px) it is impossible to scroll down and read all the text.
So far, I've tried overflow-y: scroll but it doesn't work.
Does anyone have any suggestion? Min-height: 100% on that div won't work.
Thank you very much.
Im not sure if you meant to do this, but you've got your content on position: fixed and the background scrollable.
You'll need to remove the position: fixed on the content container and add it to the background instead.
EDIT:
If you want to have your text over the image as you have currently, either change the picture of the woman to a background-image on the inner-cover or cover-container divs or add position: absolute to your content and add top: Ypx, Y being the distance from the top of the page.
I have an image of a person fixed in the background of my tumblr layout (my tumblr is tsuzami.tumblr.com), and it appears like so on my screen resolution of 1366 x 768:
http://oi39.tinypic.com/5x0f1g.jpg
but when previewed on screenfly using different screen resolutions, the person is placed in awkward location that obviously look stupid:
http://oi44.tinypic.com/f2yab.jpg
How would I lock this photo in the same place where I intended for it to be no matter the resolution? This is the code I am using for the image:
<div style="position:fixed; top: 0px; left:-140px; z-index:-2;"><img src="http://i43.tinypic.com/j7ca2u.png"></div>
It's hard to avoid that, as the content area is 500px wide, and as the screen gets narrower (even on a desktop) the content will start to cover over the image. I would be more inclined to wrap the whole page in a container div and place the image as a background on that, and then set a min-width on the container. An easier way would be to remove that image div you have currently and just add these styles to the body element:
body {
background: url(http://i43.tinypic.com/j7ca2u.png) no-repeat -250px 0;
min-width: 1200px;
}
However, I'm not too keen about setting a min-width on the body element, so preferably add those styles above to a div that wraps around your whole page.