I am trying to use bootstrap to create a navbar. The left side of the navbar is the functional menu. The right side is nav buttons with the link to the control panel or logout page, etc.
The navbar looks like the following picture.
When I reduce the size of the browser, it should look like the following picture.
However, if the browser is in medium size, the navbar would look like the following picture.
That is, the left navbar and right navbar are not inline, instead, they pile up together.
I am wondering how to make the left and right navbar always inline, or just collapse them.
The code is at: https://jsbin.com/qeduwujadu/3/edit?html,output
I tried to follow this post to solve this issue but failed.
Any help, please?
One way I usually do is I don't let the code it self to decide when it should toggle because they usually do it for I think about a 600px screen. I force the display for certain screen sizes by using the visible-lg, visible-md, visible-sm, and visible-xs classes.
By putting that in the class name, bootstrap will detect the size and display according the what screen range it hits in. You could force it to show the nav bar when it shrink by adding visible-sm, and visible-xs.
Pro: More adaptability.
Con: Increase space depending on how big the content is that you apply the class to.
Related
I'm trying to get a Bootstrap 4 Navbar to only collapse partially.
Basically I want some items aligned to the right to remain visible at all times, while most of the Navbar items to the left will collapse into a menu if you try to open the website on mobile.
The problem is that, when you expand that menu, the collapsed elements are showing before the fixed menu, as you'd expect them to, but I want them to show below, for obvious aesthetic reasons.
Working example: http://jsfiddle.net/sfm70xLe/
Desired outcome while expanded:
Desired outcome while acessing the collapsed items:
I've been playing around with the disposition of the elements aswell as trying float-right and float-right but it's proven ineffective, I'm not sure how to proceed with this without making drastic changes to the foundation Bootstrap laid for me. Any ideas?
If you move the navbar-header div up before the navbar-collapse div in the HTML it will work. Then you will just need to use order to move the navbar-header to the right for sizes larger than medium.
I'm hoping for some help, I have a static navbar along with some buttons on the right, and I have a VERY large table that the users are going to interact with.
The users are most familar with an Excel like view where there is a ribbon (my navbar) on top and the table is scrolled horizontal and vertically as necessary.
I've got the table to fill the page and have the bootstrap static navbar to show however the navbar is overlapping the table headers.
Is there an easy way to fix this overlap?
Here is bootstrap playground link detailing what I currently have.
https://www.bootply.com/iGX9K2KF9a
Sure, give the .table-wrapper a margin-top:50px and that will move it down. Since the navbar is fixed, it's taken out of the flow of the page so the relatively positioned .table-wrapper is still being placed based off the top of the page.
I'am trying to do two line bootstrap navigation like on picture. How could I achieve that? As you see the top and botton navs are inline verticaly with each other.
The idea is that if page width comes to small tablet size or mobile size the hole navigation is on one dropdown list button, like on basic bootstrap navbar.
Any other idea of making same sort of navigation as simple as possible?
What is wrong with the CSS (at least I think it is CSS related) that one particular div with a slider is not responsive anymore? The rest of the site is still responsive.
http://websiteprofessioneel.nl/
It is the big square image slider in the content right (so not the image in the left sidebar or the header image). The maindiv container that contains the rest of the slider is : <div class="scheeps_slider">
You can see the image is not scaling down anymore if you make the screensize smaller than the image width.
Is there CSS in one of the underlying divs of the slider or li's that break responsiveness?
Extra info:
( Note: It did work responsive fine when the slide was not clickable, but to get it clickable with custom fields html was slightly altered to get a setup with an ul and li approach, but I don't get how that should interfere with responsiviness)
The slider-jquery used here is from opensource 2cycle which acts as a perfectly responsive slider used in other pages so something in the specific css used here is messing it up I think
quick question. I have a tabbed interface for my site but I have all the parts of the site crashing into each other. How do I achieve a fluid layout where it simply resizes when the display is smaller. I read a few articles # alistapart and made my containing div relative to the browser window and every other div within the d container relative and still nothing. any clues on what else I should be trying?
alt text http://www.thelawyerschronicle.com/images/siteprob.jpg
The two biggest problems I see are the banner ad on top of everything else, and the tabs running over to the next line.
The tabs seem to do that simply because you have too many. You'll either need to make them smaller/decrease padding, etc. or put fewer items in the menu.
It looks like the banner isn't positioned correctly. Margin/padding?