I'm using bootstrap 4 and I've created a partially collapsible sidebar which is actually working perfectly for me.
My problem is, I'm trying to add a top header/nav bar that holds the toggle to collapse the sidebar and on the right of the header navbar I want my user icon for logging in and out, etc.
I created a header called #userHeader, which expands the width of the page and houses the toggle (again, this part works) but I used 100vw for the header and that's too much width because it extends off the page and you can't see the icon.
My question is this: How can I create a responsive header here that always extends the remaining width of the page from the space the sidebar takes up already?
In other words, if it's not collapsed and the sidebar takes up 15% of the page and then once collapsed it takes up 5%, the header would compensate in the way it does now but with the right side always stuck to the right side of the page.
The HTML block in question:
#userHeader {
width: 100vw;
height: 40px;
background-color: red;
position: fixed;
}
#userHeader i {
color: #FFFFFF;
float: right;
}
<div id="secondHeader">
<!--Note: I have no styling for this id yet-->
<div id="userHeader">
<button type="button" id="sidebarCollapse" class=".btn">
<span></span>
<span></span>
<span></span>
</button>
<i id="user" class="far fa-user-circle fa-2x"></i>
</div>
</div>
Here is a working codepen, thought I've only kept the most necessary html. All CSS and JS is what I'm using in my page currently:
https://codepen.io/anon/pen/gKPJgq
For this,since you are using bootstrap, grid system documentation may help https://getbootstrap.com/docs/4.0/layout/grid/
The width you set is fixed. You may want to try setting max-width or put a '%' as a unit since percentage units are relative to the parent element, or in your case (as i assume) body.
On the other hand, putting sidebar and #userHeader into separate columns may help solve your problem. Since Bootstraps grid works in 12 column system, giving your sidebar a, (lets say) col-3 class, #userHeader should fill out the rest.
Also, you may want to check out flexbox for overall easier layout positioning and responsiveness.
Related
On my website https://bennetdev.de I have a fixed-top navbar which seems to be wider then my actual html tag. I think it is a problem between the navbar and my bootstrap modal but I don't know how to solve it. Due to the wider navbar a white space on the right side is shown when you visit the page, but disappears when opening the modal (through the contact button) and is not existent anymore until you refresh the page. Anyone knows how to fix this?
EDIT: There is no overflow because I hide the x-overflow on my body element but what I mean is the white bar on the right side, which would be a x-overflow without me hiding it
Ahh, yes, I see it now. It seems to be caused by the negative margins on a "row".
In your case, the div <div class="project row" >.
For bootstrap rows and columns to work correctly (ie. negative margins), the parent of a "row" should have the class "container". See the docs here.
eg.
<div id="projects" class="container">
<div class="project row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
<div>
You can use max-height: 210px; to define how much height do you want for your nav bar.
Anyway I recommended to upload some code that we can see.
I'm trying to implement a UI where the navigation bar on the LHS is fixed and the content window is responsive. The following is my implementation:
<div style="width: 15%; float: left; display: inline;>
<nav class="navbar navbar-inverse navbar-left" style="">
NAVIGATION CONTENT HERE (FIXED)
</nav>
</div>
<div style="width: 85%; float: right; display: inline;">
DESIRED RESPONSIVE CONTENT HERE
</div>
how can this be achieved?
I tried using bootstrap classes by adding a container on the top and adding column classes to both the div's. The div on the right overlaps the navbar div when the browser window size is reduced.
Are you sure you want to implement such a design? Left-sidebar with fixed width and the content with variable width? It would be much easier and faster to just use bootstrap table grid system. Not to mention that it would automatically work on all devices and resolution, whereas your design would only make sense on some particular resolutions.
used the following way to fix my side navbar:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidenav_fixed
fixed the navbar with 15% width.
added bootstrap classes to the content on the RHS.
I am using bootstrap and I was wondering what would be a clean way to give a background to my container.
I am using the bootstrap class container, not container-fluid. Bootstrap doc clearly states that I shouldn't nest containers, so what is the alternative to achieve this goal ? If I set a background to my container the left and right margins are still white, I want to colour that space as well, but I also want my content to be aligned the way the container is aligned, not the way the container-fluid is aligned. Any suggestions ? My current solution is nesting a container inside container-fluid and remove the padding from the first one, but I want to make a better solution that doesn't go against the bootstrap documentation.
Thanks in advance !
EDIT
Here is for example what I had
<div class="container-fluid my-class">
<div class="container">
Some rows and columns here
</div>
</div>
and then I override bootstrap's padding in css
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.my-class {
background: red;
}
But, like I said, this is the bad way to do it.
Bootstrap doc clearly states that I shouldn't nest containers under other containers so just nest your container div under a new class div say, container-bg and add the background-image to that div like this:
HTML:
<div class="container-bg">
<div class="container">
<!-- your content -->
</div>
</div>
CSS:
.container-bg {
background: xxx;
}
If you want to set the background for the whole page, then set it on body.
If you want to set it for a section of the page, then wrap that section in an appropriate element (such as div or section), add a class, id or some other way to target it with a selector … just not one that uses a class provided by Bootstrap.
For Boostrap V4.0 and later
If you want to use boostrap colors as background, you can use these colors for the background, like below example
<div class="container bg-dark">
<!-- your content -->
</div>
I am trying to share the navbar across all devices, but I want it to format differently on small screens than on large. I am new to Bootstrap so this might be obvious, but I am having trouble getting the menu right with a single set of code and not trying to do it with different rows and col-* settings.
Bootply Sample
I want two things actually. I would like the win and loss to be on the same line (which is close without the navbar-right) except they are not even in vertical position.
EDIT: I am able to correct this when removing navbar-right etc..., but do not get the navbar-right when the menu is condensed.
Secondly, I wanted the navbar-right, so when on a small display, all the badges align on the right hand side of the menu.
Is there a way to keep the menu smaller as well, so on a tablet it is not the whole width of the screen while on a phone it might be?
When the navbar normally draws, I want the badges beside the labels to keep the menu items smaller/closer together. Only on the pull down menu do I want them to go to the right.
Do I need to create two copies of the navigation to achieve this?
First, the badges seem aligned to me if you remove those navbar-right classes. If you are using that class just to float them right, you should be using pull-right but in this case there's no need.
Second, if you wrap your badges inside another span, then you can use media queries to float the container right on mobile devices.
<span class="badges">
<span class="badge alert-success">Win: 3</span>
<span class="badge alert-danger">Loss: 1</span>
</span>
/* Note that you can use Bootstrap's '#screen-sm-min' variable if using LESS.*/
#media (max-width: 767px) {
.badges {
float: right;
}
}
If you want your navbar to be full width on mobile but not any other device, you could try something like this:
#media (min-width: 768px) {
.navbar {
width: 80%;
margin: 0 auto;
}
}
Demo
Edit
For the changing width you can use Bootstrap's col-*-* classes like this:
<div class="wrap">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
...
</div>
</div>
</div>
That means for mobile it'll be full width, but anything from portrait tablet upwards will take up 10 of the 12 grid.
Demo
Using Bootstrap Responsive - HTML appears like...
<div class="row-fluid Center">
<div id="divMapCanvas" class="span6">
<div id="map_canvas">
</div>
</div>
<div id="divMapPanel" class="span6">
<div id="map_panel">
</div>
</div>
</div>
Test Webpage: http://gfw.yyyz.net/Contact
What I would like to do is initially hide the divMapPanel div and have the divMapCanvas div centered on the page. Then after the directions button is pressed, the divMapCanvas would move to the left and the divMapPanel would appear. I have tried merely hiding the divMapPanel, but I can't get the divMapCanval centered.
Thanks in advance for any suggestions?
On the the div with class span6 that wrap your canvas, you need to set a fixed width (I used width: 526px; when I got it to work on your example page, but you could use % instead, or what have you, but it cannot be set to auto which is the default setting), you also have to get rid of the floating by adding float: none; and margin: 0 auto;.
On the divMapPanel you need to add display: none, to make sure that it doesn't take up any space in the DOM. Using visibility: hidden for instance will not work.
Then when the user click on direction and you want to display both elements side by side, you get rid of these settings by adding float: left etc. back in, and both elements should appear side by side.