I've a navbar fixed at the top. I've customized bootstrap navbar to be completely white in color, but when I scroll down the, the scroll-down screen mixes with the navbar , thereby hindering the contents on the navbar, because the navbar being transparent. How do I make the navbar fix and opaque so that when I scroll down the content should not collide with the navbar.
Try in your navbar css : opacity: 1 and/or z-index:99 (99 to be on top of other elements, but you can start at 10 for example)
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);
I have created a fixed-top bootstrap 4 navbar that is expanded on large screens, and collapsed on the others. I have also added padding-top to the <body> to prevent the navbar from overlapping the main body content.
However, on smaller screens when the collapsed navbar is expanded using the hamburger button, it expands and fills the screen. Some of the nav-links then become hidden (i.e. outside the display). Moreover,scrolling does not scroll the navbar, but only the main body content which is beneath the navbar.
Is it possible to compress the navbar to not take up more than the screen size? Or, how do I enable a scrollable navbar?
Added pictures below to show the issue.
Here is a snap in mobile view without expanding the navbar:
And here is the snap to illustrate the problem that the navbar takes up the whole viewport, and that there are still links but "outside" the display:
Here is JSFiddle if needed:
https://jsfiddle.net/suhaib47/ef37ht06/6/
Edit:
After using the answer provided by #Zim, I now face a different problem. In the desktop screen, the navbar is displayed properly. However, when I click on the nav-items/nav-links which pop open a dropdown list, the dropdown list stays within the navbar and there is a scroll bar for scrolling the navbar. How do I make the dropdown menu to show over the navbar content, while at the same time it can be scrolled but only when the navbar is collapsed.
I've included a picture to show what I mean:
The scrollbar seen in the picture is for the navbar.
Set a max-height on the .navbar-collapse that's equal to viewport height minus the body top padding...
body {
overflow: hidden;
}
.fixed-top .navbar-collapse {
max-height: calc(100vh - 4.5em);
overflow-y: auto;
}
https://www.codeply.com/go/1KXwX3I1Mh
So before this problem, I was struggling to make the navbar scroll on smaller screens when expanded. SO link: responsive fixed-top navbar when expanded fills up screen, hides some of the nav-links, and does not scroll
Using the answer in that question, I was able to make the navbar scroll but I was then faced with a new issue. When clicked on the navbar link, the dropdown menu that popped up would stay within the navbar container, and the navbar could be scrolled.
A picture to explain (OLE dropdown in this case):
This is the CSS used to make the collapsed navbar scrollable.
.fixed-top .navbar-collapse {
max-height: calc(100vh - 4.5em);
overflow-y: auto;
}
There is no problem when navbar collapsed and it can show the dropdown menu fine and scroll. But, when not collapsed on larger screen, how do i make the dropdown menu show outside the navbar container?
Here's my JSFiddle for this problem: https://jsfiddle.net/suhaib47/7b58o0d3/3/
Note: make the result viewport wide enough that navbar can be fully displayed. Click on the OLE dropdown, and you will have to scroll down to see the dropdown menu.
When I show the dropdown menu outside the container, the menu cannot be scrolled on smaller screens. When the menu CAN be scrolled, I cannot get the dropdown menu to show outside the nav container.
How do I make the dropdown menu show outside the navbar container? At the same time I'd like the responsive navbar to be scrollable when expanded on smaller screens.
I found a similar SO question but could not get it to fix my problem: The navbar dropdown menu does not beyond the container
Hoped there would be a solution to this without having to use media queries. Nevertheless, I was indeed able to fix this using media query.
#media only screen and (max-height: 450px) {
.fixed-top .navbar-collapse {
max-height: calc(100vh - 4.5em);
overflow-y: auto;
}
}
This way scrolling is available when needed, depending on the display size/orientation, i.e. when the navbar menu is collapsed.
I have a webpage which is made in Bootstrap 4. On mobile view, the navbar toggler is not going inside navbar as shown in the screenshot below:
Here is the url for the webpage. I am wondering what changes do I need to make in the style sheets in order for the navbar and navbar toggler to look good on mobile view. At this moment, the navbar toggler is coming out of the navbar as shown above in the screenshot.
You don't have navbar-brand which adjusts the navbar's height in mobile view.
You can alternatively write the fixed min-height of the navbar in css.
.navbar
{
min-height: 55px;
}
I am looking for a layout design where there are fixed width nav bars on each side with a fluid center layout. I am also looking to see if I can make it responsive. The nav bars should collapse into buttons which make the navbars slideout such as this is example:
http://getbootstrap.com/examples/offcanvas/
which is nearly what I need, but the nav bars are not fixed in the example.
This example on Bootply may help you. It has left and right sidebars that toggle off-canvas on smaller screen widths..
http://bootply.com/108332