I am using two Navbars in my app which collapse individually in smaller screens.
In Some Screens i will have two NavBars and in some only the top on.
By adding navbar-fixed-top to the navbar it sticks to the top but i want to stack them top of each other and the content of the page should be suitably spaced below so that it has visibility and does not hide below the navbars.
Link
To make the content of your page start below a fixed navbar you need to add a fixed height padding-top to the body (see http://getbootstrap.com/components/#callout-navbar-fixed-top-padding). As you have either one or two navbars you'll need two classes with different heights and add one of them to the body.
To make the second navbar appear below the first navbar you can add a class like .navbar-fixed-top--secondary to it that gets a top: 50px.
Related
I am trying to have Bootstraps collapsed Navbar open to the full height of devices while overlaying above the contents of the page. I found that there is a class for the Navbar called "fixed-top" that overlays above the contents of the page but I can't seem to have it open to the full height of the screen normally. Using .collapse ul{height: 100vh;} the Navbar opens normally up until the last Nav item then afterward 'jumps' to the bottom of the screen. How do I prevent this 'jump' and have the Navbar open to full height smoothly?
The sudden jump is because you are adding the height to the collapse class that isn't present until the last moment of the animation. Instead try to give the height to a custom class or one that you have already applied like nav-bar.
I’m attaching links of where my Navbar is now, and my intended layout in Illustrator. The problem that I am having is the logo to the left of the nav list is pushing the navbar to the right. I wanted someone’s opinion on the best way to approach this layout from a modern responsive point of view. The main image will eventually be an After Effects or Animate movie but I haven’t added any responsive code yet either. Should I put the header section into a 3 column grid container
Or use Flex like Nike
Using text align center on all Li parent elements, and changing the Z-Index of the header elements.
https://azteramaikoa.000webhostapp.com/
https://azteramaikoa.000webhostapp.com/images/amgridb.png
I need the navbar centered until about 768px wide, at which point the website will have to change because of the main image dimensions.
I'm using bootstrap to create a webpage. The problem is that I have a horizontal navbar a main tag and a footer. When I resize the screen, the navbar main and footer do not align, the navbar is wider than the main content, and the footer is more inside. To partially fix this I modify the style of each element, but when the navbar adjusts itself, it becomes wider than other elements in the HTML. Is there a global way to make everything align?
Its because you didn't include the collapse class of bootstrap which help to resize the navigation bar when screen is resized.Better to use a button which on clicking shows other tags in your navigation bar which is by the way vertical for small screens.
Also please share your code so you can be helped better.
On my website I use pure.css and the navbar consists of more elements than a small screen can display without scrolling. Therefore a scrollbar appears in that case, which I don't want.
I would like the navbar to stay at the top so that the navbar and the content scrolls simultaneously. When I use position:absolute; everything looks even worse. Also the mobile version of that navbar should still work (on mobile screens scrolling though the navbar should still be possible).
I also tried to deactivate overflow-y, but then, obviously, not every element on the navbar is clickable.
If you want that navbar and content scroll simultaneously, you shouldn't use position:fixed.
Remove position:fixed
Add float:left to menu div
Add float:right to content div
If I misunderstood what you want, the comment made by Marco Valente should be nice.
I want to align the footer (Bootstrap navbar) on bottom of screen (Browser area), without using fixed navbar.
if the content height less than the screen height , show "navbar" on bottom, otherwise use scrollbars normally.
I tried with navabr-fixed-bottom, but it always shows the navabar, even if the content height is larger.
<!-- FOOTER -->
<div class="visible-desktop navbar navbar-fixed-bottom">
...
</div>
Can anyone help me please?
Thanks
Not sure if Bootstrap has this kind of build in functionality, here is simple trick which may be helpful, but it requires you do have fixed height of the navbar.
How to keep footers at the bottom of the page