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;
}
}
Related
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 not sure why there is a spacing (margin/padding) to the left in the second and third tabs. The test site location is: http://new.vonsazkin.com/index.aspx
Click on Residents in top menu and then click on the Events tab or the Records tab. You'll notice that the grid is pushed down. If I set the width of the grid to auto, then it moves up where I want it, but it shrinks. The max width I can set is 66.67% but it is shifted to the right. I want the grid to be 100% width and not have the spacing on top. You can right click in the browser and click the Inspect Element option to view the page code and CSS for the site.
Any clue?
Thanks in advance!
Interesting :) I found where the problem is: style.css
.residents_block .tab-pane {
display: block;
...
This display: block is messing with showing/hiding tabs. With this CSS other tabs are there but have opacity: 0. I believe this is some custom css (which breaks bootstrap functionality) and you should remove it...
All you need to do is absolute position the table when its parent is relatively positioned.
.resident_workspace_form .table-wrapper {
position: relative;
}
.resident_workspace_form table.alt {
position: absolute;
}
The padding between tabs
I didn't really understand what's your problem, but if you have in mind the space between the tabs - you have padding. Also tabs have height at media (max-width: 1199px) and (min-width: 992px) The height of tabs.
I am having difficulties making the vertical navigation menu to go all the way down to the footer of the page. I tried fiddling with it, but the closest i got is me setting a specific height for the .navbar, and that doesn't help me, since I want it to be responsive.
.navbar {
border: 0px;
text-align: center;
border-radius: 0px;
background-color: #F2E9E1;
}
I am guessing it has something to do with the navbar class.
Here is the entire code: https://jsfiddle.net/u3hf1jht/1/
I'm not sure what you mean by you wanting it to go all the way down to the footer? You could just set the height of the nav to 100% of the page height, if you want it to fill your entire page.
ul.nav {
height:100vh;
}
Just had a glance at your snippet of code, it seems you've stacked in navs into navbars, they are two different components in Bootstrap. I'd take another look at http://getbootstrap.com/components/#nav.
Additionally take a look at http://getbootstrap.com/javascript/#affix for positioning your navigation. The actual bootstrap side navigation is a visible example of this in action.
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
}
See this webpage.
First try scroll it, see that the left bar remains fixed.
Resize the height of your window, so that not all of the content of the left bar is visible. Now scroll. This time, the left bar is not fixed.
In this page, there is a jquery that calculates height of left bar, compares it to the window-height and then makes the left bar position fixed or absolute.
However, I'm wondering if something similar is achievable through just HTML and CSS, not using jQuery or similar.
Any suggestions?
In short what I'm looking for is a bar with content that remains fixed, but is scrolled if the content overflows. But the scrolling should be together with the whole page.
You can use media queries to direct CSS at certain screen sizes (and other things too) so you could use one stylesheet if the screen is too small. I'm no expert so no examples, but take a look here http://css-tricks.com/css-media-queries/ . Sorry! but guess you figured it out :)
Edit: The working result is this:
#leftnav {
/* default look */
width: 300px;
position: fixed;
top:0;
height: 100%;
}
/* set the size at which the content is clipped and we cannot have fixed position */
#media all and (max-height: 500px) {
/* things inside here will only have an effect if the browser window shows
less than 500 px in the height, so here I apply the special rules */
#leftnav {
position: absolute;
height: auto;
/* etc.. */
}
}