Bootstrap Navbar Automatically Collapsing

Bootstrap Navbar Automatically Collapsing
0

#1

Hello Campers, I was just making little bit changes in my navbar then i find this when i shrink my screen to a particular breakpoint where my navbar collapses, i saw that it automatically shows all the nav item, but i do not want to show my items, i want when user click on that then my navbar collapse

and one more thing i am not able to pass the

“The Height Of The Welcome Section Should Be Equal To The Height Of The Viewport.” test, i have tried many things but still, i cannot pass, please give any suggestions to pass this test…

Personal Portfolio WebPage


#2

Hi,

First, the HTML markup.
On line 36: <div class="collapse navbar-collapse text-center" id="portfolio_nav">. That “collapse” at the beginning will fix the problem with the expanded navbar.

Now the CSS.
Under the styles for the #welcome element, add this: height: 100vh. This will fix the issues with the testing.

Happy coding!


#3

hey thanks for the answers, first one is working well, but if give the height 100vh then the #welcome-section will become so bigger and so big welcome-section has not any use

i have made several changes i have created another div with id of welcome-section then i nest my home section in that div, as well as i have renamed my before welcome-section to introduction, and then again when i gave 100vh the bottom content is overflowing how can i resolve this issue?


#4

The user stories require you to have a full height welcome div. That’s what 100vh is for, it makes the div fill 100% of the height of the screen. If you have something on top of it, it will still be 100% of the height, but moved downwards.

For example, for a screen height of 800px,if you have a navigation bar (not fixed) of 50px height before your welcome div, the welcome div will be 800px tall but it’s bottom will be at 850px from the top of the screen. I don’t know if that’s what you asked or if I explained clearly the concept… :smiley: