Im trying to make a navbar but I need it to be from Right to Left cause its in Hebrew.
I tried making a responsive Navbar Where all the linked buttons are on the Left and Going Right.
And a Brand on the Right side.
And they collapse on Small devices.
Well I cant get it to reverse and I also sometimes get an issue where on small devices the Brand and the Collapse button collide in the middle of the navbar.
Well I fixed it by adding:
body{
direction: rtl;
}
to my css...
Thanks for the help and sorry for misleading you by my wrong title D:
Maybe you can use media query with the smallest query eg media query
example:
<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>Left</li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li>Center</li>
<li>Center</li>
<li>Center</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Right</li>
</ul>
</div>
</nav>
#media (min-width: 240px) {
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
This work fine for me.
<ul class="nav nav-tabs nav-justified" style="direction: rtl;">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Related
I have tried adding floats and using some Bootstrap classes to try and get it to work to no avail. Not sure what I'm missing. I would like to make the ul or all the items centered. Below is the nav markup:
http://jsfiddle.net/bdd9U/1489/
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
<h1>Home</h1>
</div>
Also, on smaller screens, the nav's default behavior is to stack on top of each other. I wanted to make it so that the active link is the only one shown (or maybe with another link), but it can be scrolled horizontally for the other links. I am planning on using Scrollspy so active links are updated automatically if that makes a difference. Not sure how to approach that - any ideas would be appreciated.
Because the li elements are block-level (display :block is applied through Bootstrap's CSS), all you need to do is add text-align: center on the ul:
.navbar-nav {
text-align: center;
}
I've created an updated fiddle showcasing this here.
Not sure about the ScrollSpy effect, but I'd assume that you can simply pass through the collection of links as an argument into the parameters.
Hope this helps! :)
i'd recommend using 'bootstrap navbar example'(http://getbootstrap.com/components/#navbar). Specifically, in your situation i'd use this modified version:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
I need to center some content in bootstrap navbar
trying and copy from other post but isn't working...
Bootstrap: center some navbar items
JSFiddle example
my code:
CSS:
.navbar-nav ul > .center-nav {
display: inline-block !important;
left: 0 !important;
right: 0 !important;
text-align:center !important;
width:70% !important;
}
.navbar-nav > .center-nav ul, .navbar-nav > .center-nav li a {
display: inline !important;
float: none !important;
line-height: 40px !important;
}
HTML:
<nav class="navbar navbar-inverse">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<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" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Left <span class="sr-only">(current)</span></li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav center-nav">
<li>center</li>
<li>center</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>right</li>
<li>right</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Place your center navigation after the right in your markup. Remove floats, display the center nav items as inline-block and align them centrally.
Note that since this changes the order of your markup, a mobile device will list the right navigation items before the centre ones.
HTML
<nav class="navbar navbar-inverse">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<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" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Left <span class="sr-only">(current)</span></li>
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>right</li>
<li>right</li>
</ul>
<ul class="nav navbar-nav center-nav">
<li>center</li>
<li>center</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS
#media screen and (min-width: 768px){
.center-nav{
float: none;
text-align: center;
}
.center-nav > li{
float: none;
display: inline-block;
}
}
JSFiddle
If I understand your question correctly you are wanting to center the li's with the class name center-nav.
Add the following to your css if that's what you are looking for:
.center-nav {
text-align: center;
}
You're using this Bootstrap class:
<ul class="nav navbar-nav navbar-right">
<li>right</li>
<li>right</li>
</ul>
navbar-right
Which clearly floats that part of the navbar to the right.
You should try to look into the classes you are using, especially if taken from a framework, and ESPECIALLY if taken directly from a template.
The !important will have no effect if your custom CSS comes before the Bootstrap CSS, which is probably what's happening.
We are designing a new website, and the designer has created the nav bar as follows, you can see the curve (this is what I'm trying to crack!)
Below is how my current header is
This is my current HTML, I also had to create a new CSS class for the brand so it would appear in the middle of the screen
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</div>
<a class="navbar-brand" href='#Url.Action("Index", "Home")'>LOGO HERE</a>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>PRODUCTS</li>
<li>FLAVOUR LAB</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT US ON LIFE INVADER</li>
</ul>
</div>
</div>
</nav>
And the css is as follows
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
When I create a test image and try to apply the style i.e back ground image I get the following output, as you can see the logo with the curve half shows and appears to the left hand side of the screen.
The updated CSS
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
background-image: url('/Content/Images/TempLogoExample.png');
background-repeat: no-repeat;
z-index: 9999;
}
I've attached a test Image for anyone that feels they want to have a go at it, any solution/advice would be highly appreciated.
It appears on the left corner because you have set Left:0. try changing that using percentage mark. Eg:- left: 45%;will work in your case. if not try changing the percentage value.
I Recommend to go with a different markup approach to achieve this. Why can't you use columns grid in the main section and then bring your designs internally. Below markup will help you to acheive this.
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<div class="col-xs-4">
<ul class="nav navbar-nav navbar-left">
<li>PRODUCTS</li>
<li>FLAVOUR LAB</li>
</ul>
</div>
<div class="col-xs-4">
<a class="navbar-brand" href='#Url.Action("Index", "Home")'>LOGO HERE</a>
</div>
<div class="col-xs-4">
<ul class="nav navbar-nav navbar-right">
<li>OUR STORY</li>
<li>VISIT US ON LIFE INVADER</li>
</ul>
</div>
</div>
Using bootstrap v3.0
Id like to dynamically center the navigation bar. i.e. A fix that doesnt hardcode a width.
How is this achieved? Below is a sample of the standard navigation code with excess tags removed.
<!-- NAVBAR
================================================== -->
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">All Saints Church, Ripley.</a>
</div>
<div class="navbar-collapse collapse" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ./NAVBAR -->
The documentation states to float the navbar right insert .navbar-right #<ul class="nav navbar-nav navbar-right"> ... shown here http://getbootstrap.com/components/#navbar-component-alignment.
Having followed the methodology of this question: twitter bootstrap -- center brand in nav bar I cannot centralize the navigation using margin-left: auto; and margin-right: auto;
Any help is greatly appreciated.
For the record, I don't quite like this solution =) But a brute force way may be to add the following CSS:
.nav.navbar-nav {
float: none;
margin-left: auto;
margin-right: auto;
}
and the following jQuery to force the width down from the auto that is being inherited from .container:
var width = 0, $navbarLinks = $(".nav.navbar-nav");
$navbarLinks.children().each( function(idx) {
width += $(this).outerWidth();
});
$navbarLinks.width(width);
See the jsFiddle for testing.
I have found it easiest to use the nav-justified class for this purpose..
<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 nav-justified">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
Demo
You can also constrain the width using an extra class. See the 2nd navbar in the demo.
I'm having trouble with lining up the connections and sign out sections on my navbar toggle. As you can see, the last two are out of line with the others. I am using the bootstrap 3 site as a reference, but I'm sure I have something not marked right.
HTML
<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="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Site</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Dash</li>
<li>Edit Profile</li>
<li>Invite</li>
<li>Record A Message</li>
<li>
<p class="navbar-text">Connections <span class="badge">0</span></p>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text">Sign out as <a class="navbar-link" href="Login.aspx">User</a></p>
</li>
</ul>
</div>
<!-- /.navbar -->
</nav>
Thank you
I have tried a few different ways and the only solution I found without breaking the "mobile-first" approach was overriding the "navbar-text" class with a margin-left: 15px which also appears on the #media (min-width: 768px) line 4695.
.navbar-text {
margin-left: 15px;
}
I hope it helps ;)
trying removing the paragraph tags