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
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 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.
I have been able to center elements with margins equal on both sides in mobile without using bootstrap.
My landing page, however, I have used boostrap columns and centered them. I run into problems with mobile portrait display. Landscape display looks fine, everything is centered.
What I have tried:
-setting width to word container and box to 280px and shrinking my navigation menu accordingly.That didn't work.
I am thinking it might be that I have a width for col-centered of 500px which might be what is wrong.
My site can be viewed # http://lewisdesigns.github.io
the link for your project "www.lewisdesigns.github.io" not working. ok
not an issue but i will like to tell you to remove margin-left and
margin-right and add
"margin:0px auto;"
to css selector of each element (e.g. class/id); besides you can also
try for
"float:none; text-align:center;"
in this case.
I am using bootstrap and trying to tweak one of the free template for admin needs. Right now the content inside #page-wrapper leaves too much space on either side when the window is maximized. I tried playing with different padding, margin size but then the responsiveness loses and the horizontal scroll bar appears. How can I reduce the spaces on both the left and right side of this content without losing responsiveness.
Please find the screen shot below
The fiddle is available here
The template was working fine originally but when I wrap it inside the bootstrap container div, I get this problem.
change the container to container-fluid
You are using .container class as wrapper. It has specific width adjustment, which depends upon screen resolution. You should use .container-fluid class for a fluid layout. Or otherwise you have to edit bootstrap css file. See the css code:
.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
#media (min-width:768px){.container{width:750px}}
#media (min-width:992px){.container{width:970px}}
#media (min-width:1200px){.container{width:1170px}}
.container-fluid{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}
I am trying to keep my top-bar navigation from going behind my logo image on the header of my page. See below an example of the page when it is maximized in my screen:
Maximized View
Here is what it looks like when the browser window is made smaller:
Smalller Screen Example
I am trying to fix this page so that the top nav-bar that currently runs behind the image when the window is made smaller, will instead move and extend to the right.
Any ideas? The site is Inhishands.com
Thanks!
Your problem is that the menu (<ul id="display">) has the CSS property float:right, so it will always be positioned relative to the right side of the screen. When the screen is made smaller, the right side moves closer to the left, so the menu moves leftwards too (and overlaps the logo).
If what you want is for the menu to always start from the right side of the logo (and not to overlap it), then you could give it the property float:left and add a margin to its left side (like margin-left:370px). There are other ways of positioning it (like using absolute positioning) but this will get the job done.
Use Z-index on the navigation. In the CSS, set the z-index of the hands image lower than that of your navigation and you will see the navigation on top instead of behind.
Here's some information on Z-Index in case you need it: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Nice design.
First of all you need to fix the minimum width of the top menu HEADER in your CSS.
Fix the header min-width according to the resolution you need:
#Header{
min-width: 1237px;
}
or directly into the HTML
<div id="Header" style="min-width: 1237px">