I would like to add two icons to my collapsed bootstrap menu having them equally spaced, including the hamburger menu, and all 3 items centered. As the viewport size changes I want to keep them centered and equally spaced responsively using Bootstraps breakpoints. I have included two examples of what I'm trying to accomplish, I'm just not sure the best way to proceed. I've tried wrapping the logo and icon in the navbar-brand and adjusting it but it did not give me satisfactory results.
Related
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 working on a website and I'm using the bootstrap framework.
I have a navbar setup, pretty "original" but I have too many items on the navbar. Therefor I have 2 lines of navbar-items.
What I want is that the navbar sets as many items on 1 line and if there is not enough width to set them all that it show an dropdown with "more" and that the remaining items are under the "dropdown".
First, I suggest if you really have so many items in a navigation, you probably need a vertical nav menu instead of horizontal navbar.
Then, If you really want what you described, you can't do it with bootstrap out of box, you need write your own "dynamic" dropdown by yourself.
What you can do is listen to window.resize event,
detect the responsive navbar width and calculate how many items in the tail should be put into a dropdown list. Then do that in javascript.
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.
I'm working on a small project (http://laurensvandijk.com/as/diensten.html) and I'm trying to get the pricing panels to align horizontally in tablet portrait view. Currently they are stacked on top of each other). I'd like to see them next to each other in tablet view. In mobile view however, I would like them to be stacked on top of each other as it is.
I'm probably missing something in the media queries of my css file, but can't seem to figure out what's making them stack on top of each other when there is clearly enough space available to align them horizontally.
The class you have applied to those blocks is col-lg-4 col-md-4 sm-6. Note that the last one is missing the col- prefix.
I know that this is not my "personal helpdesk", but am looking for a simple solution to implement a navbar where navbar items dissapear and eventually turns into a dropdown (or left side navbar) as the browser is resized horizontally like http://mashable.com.
I am currently using http://www.bublinastudio.com/flattybs3/ which is built on top of Bootstrap 3. I have been looking for hours but all I can find is "how to put dropdowns in your navigation bar". Nobody explains how you can show/hide navbar items based on browser width and how to prioritise your items, indicating which should disappear first.
If any of you could please just redirect me to some useful sites with more information about this I would be most grateful!
Bootstrap 4 (updated 2019)
Here is a newer option for Bootstrap 4.1. This will collapse the overflowing extra navbar items into a right side dropdown list. It progressively moves the navbar items to the dropdown.
https://www.codeply.com/go/IETSah3bFG
Bootstrap 3 (original answer)
If I understand your question, you're looking to have the navbar links collapse to the "More" dropdown on the right when there is not enough width. This would require customization to the CSS, and some jQuery to monitor the width of the navbar and collapse the links overflowing accordingly...
Here is a working example: http://bootply.com/128897
You could look up information about both Media Queries and also :nth-child() selector. The should help you along with what you are hoping to do!
nth-child()
http://css-tricks.com/how-nth-child-works/
http://api.jquery.com/nth-child-selector/
Media Queries
http://css-tricks.com/css-media-queries/