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.
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.
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 have been trying to develop a menubar for bootstrap in which the image logo be centerized instead to the usual left of the bar. But the problem is, the right links of the menu bar goes off screen. When I preview the page with a width greater than 2050 pixels, it looks fine.
But when I have something smaller than that, the right links didn't respond to the window change and slid off the page.
Is there any way to fix this? I have been playing around with the col-md-7 and the col-md-offset-3 class of the nav. But it didn't fix the problem, just moves/resizes it around the top.
Here is the link to the snipp of the page. http://bootsnipp.com/snippets/rvGQz
DIV with container class, that wraps your navigation, breaks the layout because of this class actually sets the width:
.container {
width: 1170px;
}
Remove container class from a DIV and that should do a magic for you.
Have you adjusted the media queries for each break point in the grid as you adjust your screen sizes?
http://getbootstrap.com/css/#grid-media-queries
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