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?
Related
Whenever I click on underneath the navbar then It shows like a link, and I don't want that. just like I shown in this picture. https://imgur.com/4JOcVhU
There is some css issues. like padding or hights of your navbar link elements
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 am adding a menu to the side of my page using Bootstrap. I want the menu to stay at the top of the page when the user scrolls past it. I have discovered affix which is in bootstrap.js. However because I am using different col sizes for the screen I am struggling to get it to stay in the right place.
I have got it to start at the right time and to make it position the top correctly but the width and the right are not working.
I am using bootstrap 3.3.
I think that I will have to use percentages of the screen width and then also do media queries in the CSS.
JS Fiddle
I have solved it.
The element with affix needs to be a child to an element with a col- class on it. You then also have to set the width in pixels for each different screen width that bootstrap recognises.
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 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.