I'm having the following problem:
The Bootstrap 3 navbar according to the documentation has three different dividers as defined here: http://getbootstrap.com/components/#navbar-default
nav navbar-nav
navbar-form navbar-left
nav navbar-nav navbar-right
However, I don't have any navigation links to input in the nav navbar-nav section next to brand; I only make use of navbar-form navbar-left and nav navbar-nav navbar-right so I decided to remove nav navbar-nav entirely.
The issue that gives me is that when the menu collapses there is a weird spacing between the navbar and the form. What is the proper way to implement what i'm trying to do and / or avoid this issue?
Update If I drop nav navbar-nav navbar-right I get the same spacing issue except for the bottom for the bottom of the collapsed menu. It seems that Bootstrap expects something to be there; is there a way around this?
Update2 Default Bootstrap 3 Navbar http://jsfiddle.net/wmkp595e/
Spacing issue between the search form and navbar http://jsfiddle.net/wmkp595e/1/
If you look at the Bootstrap 3 css (https://raw.githubusercontent.com/twbs/bootstrap/master/dist/css/bootstrap.css) of the navbar before the media queries -- which is the one used by the small viewport menu, you'll see that the borders are there no matter where you put your form, so if it's right after the .navbar-header you will have double rules and a padding on the top that you may or may not want to remove.
.navbar-form {
padding: 10px 15px;
margin-top: 8px;
margin-right: -15px;
margin-bottom: 8px;
margin-left: -15px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}
If you put your form right after it, write some css to address this, since your css will come after the Bootstrap CSS, you will need a max width or yours will screw up the padding:
#media (max-width:767px) {
.navbar-form {
border-top:0px;
padding-top:0;
}
}
DEMO: http://jsfiddle.net/wmkp595e/3
nav navbar-nav navbar-form navbar-left navbar-right
are utility classes that sets positioning of the element,
can you make a fiddle or show the site?
This is default behavior with Bootstrap. If there is too much content in the top navigation then when the browser window size is smaller it will cause the elements in the header to wrap. There are a couple of ways to deal with it:
You can reduce the amount of space that is being used in the navigation by either reducing padding or making your navigation links use less text or sizing down your input elements. This is probably the simplest option.
Alternatively you can edit the #media CSS in bootstrap to allow the navbar-toggle button to activate sooner.
Related
I have a navbar that can be configured to be both vertical or horizontal placed on a page.
It is for a widget on a system using bootstrap 2.3.2.
I want to remove or move the triangle above the dropdown. (What is it called?)
I have tried to set the ::before to display:none , content:none, etc without any success.
Altering the css position left and top only seem to affect the border.
Is there no way to remove/hide this in a neat way? or even better, position it on the left side, towards the navbar?
.navbar .nav>li>.dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, .2);
content: '';
color: rgba(0,0,0,0);}
Or is this default behavior from bootstrap?
The menu is created by reading through a JSON, so i was hoping for to use the same code for the vertical and horizontal menu, since this is just a visual "issue".
Easy solved by setting content to none on both ::before and ::after.
Should have thought of that ::Before I posted.
Right now I have my navigation links centering themselves on a large display.
However, at the breakpoint and when the menu button comes up I'd like for the menu items to align themselves right. It just doesn't look right like this.
Also a way to remove that little white line right above the navigation links would be great, I'm not sure where it comes from. Thanks!
Check the issue out at https://willhay.io/masonry
To me the menu looks better as it is, centered.However here is the code for the way you like it:
#media only screen and (max-width : 780px) {
.noStyle li {
display:block;
text-align: right;
}
.noStyle {
float: right !important;
}
.navbar-collapse {
-webkit-box-shadow: inset 0 0px 0 rgba(255,255,255,.1);
box-shadow: inset 0 0px 0 rgba(255,255,255,.1);
}
}
Change the "780px" to your prefered width.
You have an extra-class, line 78 of your test.css, that displays inline li items in your menu. You need to remove that class from your menu items of from CSS. Then you can float your items. To do that you have to remove inline block from your UL declarations you've done on line 23 and set LI items to text-align: right;
I found some free source code online for a nice menu bar that I like. It came with its own stylesheet which worked fine, but it jacked up a lot of the vertical alignment on my existing site. I want the menu bar and all tables centered on every page--simple. But because of this new stylesheet, everything is kinda centered, but not quite, and sometimes it's way off center.
I can fix any page, case by case, by playing around with margin-left in various elements, but this is tedious, and whenever I add a menu item, or put 2 tables side by side, etc, the horizontal alignment gets all jacked up again. I'm looking for a simple, universal way to center my menu bar and tables so that when menu items are added or removed, or tables get wider or placed side-by-side, all the centering stays correct.
First, a visual:
As mentioned, I can get everything to align perfectly only if I change styles on a page-by-page basis and tweak it differently on each page. I'm looking for a global solution.
The body tag has a width set:
<body style="width:720px;margin: 50px auto">
The menu source instructions said I have to set a width on body, which I've never done before on other web pages. If I don't do it, all the alignment goes way off. It seems ideal to not have to set a body width, I'm guessing that's causing problems.
The HTML for the menu bar looks like this:
<ul id="nav" style="margin-top:-95px">
<li><img src="images/RefSlot_Menu.png" onclick="location.href='index.html'" title="RefSlot Home Page" style="cursor:pointer;width:119px;margin-right:78px;margin-left:10px"></li>
<!--<li>RefSlot</li>-->
<li>Organization
<ul>
<li>Create New Member</li>
<li>Your Members</li>
<li>Sites</li>
<li>Archived Groups</li>
</ul>
</li>
<li>Create Group</li>
<li>Profile</li>
<li>Contact Us</li>
</ul>
CSS on top-level UL:
#nav {
margin: 0;
padding: 7px 6px 0;
background: #777D85 url(images/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
CSS on each LI:
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
What can I do to force my content to center? Currently I'm having to tweak around with margin-left on BODY or TABLEs, etc, different on each page. Thanks in advance.
Working example: http://www.refslot.com/_stackdemo.html
Add following code to your css file:
body {
margin: 0 auto;
}
or change your body tag like this:
<body style="width: 720px; margin: 0 auto;">
I am customizing bootstrap using less. I want to add a shadow to the .navbar.
My solution is as follows:
//Import of bootstrap core navbar - second as to save specificity
#import "bootstrap/navbar.less";
//Overrides:
.navbar {
position: relative;
min-height: #navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: #navbar-margin-bottom;
border: 1px solid transparent;
border-bottom: 1px solid #FFF;
-moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888;
box-shadow: 0px 3px 10px #888;
//Prevent floats from breaking the navbar
&:extend(.clearfix all);
#media (min-width: #grid-float-breakpoint) {
border-radius: #navbar-border-radius;
}
}
This way I do not modify bootstraps original source, and it will be easy to update bootstrap, however the new navbar class receives higher specificity than all bootstrap classes. So the following:
<div id="navigationbar" class="navbar navbar-default navbar-static-top" ng-cloak ng-controller="NavController">
The navbar border-radius will override navbar-static-top an the result is round corners.
If i import the bootstrap/navbar.less after I define my own class it does work. But is there a better solution?
I wonder if your problems really have to do with CSS specificity.
You Less code will be read from top to bottom (only for variables last declaration wins).
Bootstrap defines the .navbar class first and than the style classes (.navbar-default) and position classes (.navbar-static-top).
When the .navbar-default override some styles of the .navbar class you undo this overrides by defining the .navbar class again after .navbar-default.
As far as i understand you only need the following Less / CSS code:
.navbar.navbar-default {
-moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888;
box-shadow: 0px 3px 10px #888;
}
Demo: http://www.bootply.com/VhEmBcAYhY
Cause the Bootstrap navbar classes do not declare the box-shadow property at all, you can add this code anywhere in your Less code.
Good location you this code seems at the end of bootstrap.less or even navbar.less. Or create a custom.less file and import that at the end of bootstrap.less.
The easiest thing I've found, and this is what we do where I work, is to NOT use the Bootstrap LESS files, and instead using the minified CSS. Since you're ONLY overwriting Bootstrap styles, NOT changing the source styles, it will make it much easier.
With LESS, since you are nesting styles within styles, you'll find that if the styles aren't nested exactly as Bootstrap has them (since you're trying to override them), that their styles may be more specific, and therefor take precedence over your styles.
In Zurb's Foundation 4, whenever we have the following top-bar navigation
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name"><!-- Leave this empty --></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
.
.
.
and we use a mobile or just shrinks the browser are a lot, whatever is in the top navigation bar collapses and its contents are replaced by a cool menu icon. As in the picture bellow:
I've tried to use Firebug/Chrome Dev tools and the only thing I'm certain about this button is that is doesn't use a picture. Was it built using only CSS? If so, how?
Googling around I found this site:
http://css-tricks.com/three-line-menu-navicon/
It seems that Foundation uses the "Pseudo Element w/ box-shadow" trick, but I wasn't able to find it in Zurb's code.
My aim is to use this 'menu button' in other parts of my code, not related to the shrinking of the browser's area.
It's not difficult to find in the code, just inspect the element .toggle-topbar .menu-icon a span
I've made a Fiddle that just has the code for the menu icon:
http://jsfiddle.net/3HPLu/
The only code you really need to generate the three lines is:
#menu-icon {
display: block;
-webkit-box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black;
box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black;
}
But Zurb just use a mix of positioning tricks to add the 'Menu' text.