I have a fairly simple home page that currently contains a navbar with two dropdown menus. One of menus contains a large number of entries but it doesn't allow me to scroll to the end of the list.
I created a fixed-top navbar with a navbar-brand, a home link and two dropdown menus. One of the menus is short with just 2 items and the other contains about 32 items.
Everything renders fine but when I open the larger of the two menus, it displays most of the items but will not allow me to scroll to the rest.
I expected the navbar to stay fixed to the top of the page while I could scroll all the way to the bottom of the large menu.
This can occur because the height of your page is less than the height of the menu items. So when you click the menus, the extra menus are hidden and not scroll-able.
Try this :
html, body
{
height: 100%;
}
or set the minimum height for the body to 100%
body {
min-height: 100%;
}
if both doesn't work try to set a fixed height for dropdown-menu and make it scroll.
.dropdown-menu{
max-height:300px;
overflow-y: scroll;
}
Related
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'm working on a website, I have implemented the inverted navbar from bootstrap taken from here :
https://getbootstrap.com/components/#navbar
I haven't modified it, but when its resized to a smaller window in computer browser, or when viewed on a mobile phone, when you clicked the "3 bars icon" for expanding the menu it's not showing all of the menu buttons ().
I have tried to change the CSS but without any luck.
What is it that I should look for to change, or why is it not showing all items from the menu?
This is the website itself: https:/dh-automotive.com
find this in your style.css file:
.nav {
width: 90%;
float: right;
max-height: 65px;
min-width: 680px
}
remove max-height and min-width lines.
Overall, your CSS is incredibly messy, how did you manage to get it to this state? What are you using to build this website?
I have a navigation bar which does not scroll after display in responsive mode.
I will provide you with a link to my website: WebSite Link with navigation bar example
Just resize the window to a maximum of 500px and click the navigation to open menu.
Click the submenu's and you will see that it will not display all of the navigation content and also displaying over the website's content.
I want to make it show all its height and push down content also.
Well, the submenus are too long to be displayed, so the people who created the theme/template made these dropdown containers 200px high and enabled scrolling in them (you CAN scroll down in them). This is written in the following CSS rule:
.menu > ul > li > ul {
position: relative;
overflow: scroll;
height: 200px !important;
}
You can take out the last part, which will show the fill length. However, this will go beyond the bottom of the screen and NOT scroll, so you'll be better off with the given situation. You can also change the pixel value in height: 200px !important; - this will make the submenus a bit higher, but that doesn't make it much better.
I would leave it as it is and maybe add an icon that makes it more obvious that the content of the dropdowns can be scrolled.
I've got a highslide gallery in my page http://civicsector.org.ua/multimeda/foto/208-akcya-geroyi-nezalezhnost.html
However, the page also contains a bootstrap affix at its top, which appears when you scroll down the page a bit.
If you open the page and wait (without performing scrolling) until the gallery fully loads, the gallery is placed just the way it should.
However, if after that you scroll down so that the affix gets shown, and click to view the next image, the whole gallery moves up so that it actually overlays the previous layout block containing the article text.
It seems like upon the bootstrap affix appearance some kind of a gallery 'refresh' should be fired so that highslide recalculates the gallery position. How do I achieve that?
Thanks.
When affix kicks in, the affixed div is removed from the normal flow of the page which causes the parent div div to collapse.
Fix:
Wrap the affixed div in a new div. Give this dix two different height, or hide it, based on the break point of the affixed div (the menu) - which seems to be 1199px and 979px.
HTML:
<div class="affix-wrapper">
<div data-spy="affix" data-offset-top="250" class="your classes here">
<!-- content of the div -->
</div>
</div>
CSS:
.affix-wrapper {
height: 70px;
}
#media (max-width: 1199px){
.affix-wrapper {
height: 139px;
}
}
#media (max-width: 979px){
.affix-wrapper {
display: none;
}
}