I have an idea and not sure how to get it to work.
I have a bootstrap navbar on my site that has links and a "brand". The brand is centered within the navbar using this modification. Bootply
Instead of setting the navbar up like this:
{ (link)(link)(link)(....bunch of empty space....)(BRAND)(....bunch of empty space....)(link)(link)(link) }
I would like the navbar to set up like the diagram bellow.
{ (....bunch of empty space....) (link)(link)(link)(BRAND)(link)(link)(link) (....bunch of empty space....) }
I am very new to coding so please give me some time on the response to any questions you may have.
Thanks!
Just add padding to the left of the first link.
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Center 1</li>
<li>BRAND</li>
<li>Center 3</li>
</ul>
</div>
</nav>
CSS
#media (min-width: 768px) {
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-nav > li.navbar-right {
float: right !important;
}
}
Fiddle
http://jsfiddle.net/52VtD/9483/
Related
I'm developing a web application and I put in my application the bootstrap menu I would like when the application reaches the maximum width of max-width: 770px the menu would be the same as the menu that is in the normal width of the page.
But when giving the display none in the menu navbar-header it does not exit and the menu nav navbar-nav does not appear in the maximum width of the page of 770px
Menu in the normal width of the page
Menu at the maximum width of 770px
<div class="body-wrap" >
<nav class="navbar navbar-inverse" role="navigation" id="azul">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<div class="conteudo"><li>Pagina Principal</li></div>
<div class="conteudo"> <li>Contato</li></div>
<li class="dropdown">
<div class="conteudo"> Produtos <b class="caret"></b></div>
<ul class="dropdown-menu">
<li>Camisetas</li>
<li class="divider"></li>
<li>Calças</li>
<li class="divider"></li>
<li>Bermudas</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
CSS
#media (max-width: 770px) {
body{
background-color: yellow;
}
.navbar-header{
display: none;
}
.nav .navbar-nav{
display: inline;
}
}
I am not sure If I got what you mean but if you want to disable navbar-collapse you can simply add this CSS:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
Fiddle here
You can simply remove:
the button in element with class "navbar-header"
remove css classes "collapse navbar-collapse"
In this way the button disappear and you don't need to add extra css rules.
The main bar will remain visible with all widths.
I have li elements in a nav menu, and I want to center the elements in the ul. I know this question has been asked many times, but I have tried almost everything and still cannot get it to work the way I would like. Here's the relevant portion of the code:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav"id="nav">
<li class="active">Home</li>
<li>Login</li>
<li>Registration</li>
</ul>
</div>
</div>
</nav>
Here's the HTML for the whole homepage
add this css code
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
So, I've set my navbar to a custom height of 80px, but now that makes my nav items not centered vertically. I've been searching for an answer to center them vertically in relation to their parent item for awhile now so I figured I'd give StackOverflow a shot.
Screenshot: http://screencast.com/t/zfUuX9SSQK
HTML:
<div class="container-fluid isModified">
<div class="row">
<nav class="navbar isModified" role="navigation">
<div class="col-lg-8 col-lg-offset-2">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar isModified"></span>
<span class="icon-bar isModified"></span>
<span class="icon-bar isModified"></span>
</button>
Tickets
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav isModified">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div> <!-- end col-lg-12 -->
</nav>
</div> <!-- end row -->
</div> <!-- end container -->
CSS:
.navbar.isModified {
height: 80px;
border-radius: 0;
background-color: #cccccc;
}
.icon-bar.isModified {
background-color: #fff;
}
Vertical alignment can be done in a number of ways, as shown in this Stack Overflow question. However, they're fairly situational, meaning there isn't a single approach that can be applied to every case.
For the issue you're facing, I'd suggest the line-height approach, since all of your navigation content is on a single line. Just remove any vertical padding on the elements in questions, and set them to have the same line-height as the desired container height (80px):
.navbar-nav li a {
padding:0 15px;
line-height:80px;
}
.navbar-header a {
padding:0 15px;
line-height:80px;
}
Here's a Bootply to demonstrate. Hope this helps! Let me know if you have any questions.
Alternatively, you can use:
.navbar.isModified a {
padding:0 15px;
line-height:80px;
}
Though you may find this too broad of a CSS selector if you plan on styling other links in your navbar differently.
Note: If you want the mobile version of the menu to look alright, you may need to use media queries to override these styles with more of your own.
You can do this several ways depending on how your nav links need to behave. You probably want to apply line-height to you links so on hover they are still the full height of the navbar above 768px (or not, depends). You can then use another media and add padding to the navbar-header class to have a taller navbar. Don't use a fixed height though because on mobile your toggle nav will have no background color since the navbar has a default value of min-height: 50px.
Working Example:
.navbar.isModified {
background-color: #cccccc;
}
.navbar.isModified .icon-bar {
background-color: #fff;
}
#media (min-width: 768px) {
.navbar.isModified .navbar-brand {
line-height: 50px;
}
.navbar.isModified .navbar-nav > li > a {
line-height: 50px;
}
}
#media (max-width: 767px) {
.navbar.isModified .navbar-header {
padding: 15px 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-static-top isModified" role="navigation">
<div class="col-lg-8 col-lg-offset-2">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Tickets
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav">
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
i am trying to build my navigation bar using bootstrap, but i have the issues that when i have a small screen or window the mobile menu button doesn't appear in the right corner. What did i do wrong?
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
and my css:
.navbar{
background-color:#fff;
border-bottom:1px solid black;
}
.navbar-nav > li > a{
color:#1E88E5 !important;
font-size:16px !important;
font-weight:bold !important;
display: block !important;
background-color:#fff !important;
}
.navbar-nav > li > a:hover{
color:#673ab7 !important;
background-color:#f0f5f5 !important;
}
You forgot navbar style class in your nav element (navbar-default or navbar-inverse). Styling toggle button depends on this class.
<nav class="navbar navbar-default navbar-fixed-top">
including bootstrap.min.css & bootstrap.css in links would do it.
I can't seem to figure out how to center the navigation items. I can place them either to the left or right but not center. Is there a simple work around?
<!-- Navigation -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Mobile navigation button -->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Navigation items -->
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>OUR PRODUCTS</li>
<li class="active">ABOUT</li>
<li>OUR TEAM</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
I've tried a few things but they're a little sloppy and caused some issues with mobile version. I'm looking for something a little more proper.
1) Use <ul class="nav nav-justified"... for the menu container.
2) Look at this codepen source:
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li
{
float: none;
display: inline-block;
}
3) Read the answer right there
There are three different ways to do something like You want, choose one.
You could easily find your answer, please try to do this alone next time, bro.
I believe you forgot to add or edit.
On your Bootstrap.css go find this class and edit on text-align:center. This will make your text navbar be centerized.
.navbar.navbar-collapse{
text-align: center;
}
If you still don't get it. You can take a look my example that i do on Bootply.
HTML
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>OUR PRODUCTS</li>
<li class="active">ABOUT</li>
<li>OUR TEAM</li>
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
CSS
#media (min-width: 620px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
}
DEMO
You could also use some custom CSS via flexbox.
.nav {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
float: none; // overwrites Bootstrap's float value
}
Try this one
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li
{
float: none;
display: inline-block;
}
.navbar-nav > li a{
text-decoration:none;
padding-left:15px;
}