When my nav collapses, the links take up the full width of the screen. How can I make it just the width of the text inside? I've tried targeting the ul and the li css with no luck and an not sure how to approach this. Any suggestions on what style would fix this?
<div class="collapse navbar-collapse pull-right" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About</li>
<li>Experience</li>
<li>Skills</li>
<li>Graphic</li>
<li>Video</li>
<li>Contact</li>
</ul>
</div>
You could use something like this:
#nav-collapse > .nav > li {
display: inline-block;
}
Related
Total Bootstrap newbie here (and still learning CSS) so big apologies if this is a dumb question...
I had constructed a Bootstrap nav bar with the last link as a button element but then realized it was better practice just to make it an anchor element instead:
<div class="collapse navbar-collapse" id="tcsnavbar-links">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Order Information</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Quote Request</li>
</ul>
</div>
The btn-primary styling no longer shows up now that it's nested in the link element though and I can't seem to write the CSS so that it 'sees' this styling and overrides the default styling on the div:
#tcsnavbar-links {
padding-right: 20px;
}
#tcsnavbar-links ul li a {
color: #5f5f5f;
}
#tcsnavbar-links ul li a:hover {
background-color: #eeeeee;
color: black;
}
.btn-primary {
background-color: #00afec;
border-color: #0296ce;
font-size: 1.1em;
}
.btn-primary:hover {
background-color: #0077c5;
}
If anyone can point me in the right direction it would be much appreciated, thx :}
I found your Problem interesting and started to read the Bootstrap docs and tried some things.
In my understanding it's not good practice to use the anchor element when you want a button. So when you want a button then use the button element.
Source
But in most cases it works fine and is also intendet to use the button classes on the anchor element. For example you want some Button anywhere on the page that links to the following page like a Next Button.
But not when you use it within .navbar-nav. The Docs explictly say
Context-specific usage
Like the standard button classes, .navbar-btn can be used on <a> and
<input> elements. However, neither .navbar-btn nor the standard button
classes should be used on elements within .navbar-nav.
Source
But what you can do is to use nav-pills for this one element like this. Then you have a buttonlike link in the navbar
<div class="collapse navbar-collapse" id="tcsnavbar-links">
<ul class="nav navbar-nav nav-pills navbar-right">
<li><button href="#" class="btn btn-primary navbar-btn" type="button">Quote Request</button></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Order Information</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
Bootply
I'd like to override the nav link-color in a role=presentation for a nav list. I'd like to set it to yellow. I am only looking to select this one instance.
the html:
<ul class="nav nav-pills nav-stacked">
<li role="presentation">About</li>
I have:
li[role=presentation] a:link{
color:yellow;
}
But this doesn't work. Any ideas on how to get this to work?
take the :link out of your css selector
li[role=presentation] a{
color:yellow;
}
<ul class="nav nav-pills nav-stacked">
<li role="presentation">About</li>
<li role="">About</li>
<li role="presentation">About</li>
</ul>
Try:
li[role="presentation"] a{
color: yellow !important;
}
I want to align li values right most of the screen. but it does not appear.
Codepan: http://codepen.io/
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div>
</div>
text-align:right; or align="right" does not help
Try using the Bootstrap pull-right class inside of your ordered list tags like so:
<ul class="pull-right">The text you want aligned to the right</ul>
You need to apply the text-align: right to the anchor tags inside the list.
CodePen
CSS
.navbar-right li a {
text-align: right;
}
Add text-align: right; to the ul instead of the li
How can I center the buttons in the jsFiddle I set up so that the buttons are equally spaced and centered within and through-out the navbar?
http://jsfiddle.net/3GQyq/3/
I have tried different methods such as
display:inline-block;margin:0 auto; text-align:center;
But I cannot get it to work.
If you could give a little explanation instead of just fixing the CSS as I want to learn so I do not have to keep coming back here.
EDIT:
Just like how they are centered here ^.
Bootstrap 3 has a nav-justified class that can be used on nav. No extra CSS required:
<div class="container">
<h3 class="text-muted">Project name</h3>
<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>
Demo: http://bootply.com/72519
Based on the comments, to have full-width centered links using the navbar-nav class, use flexbox...
.navbar-center {
width:100%;
display: flex;
}
.navbar-center>li {
flex:1 1 auto;
}
<div class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav navbar-center text-center">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li>More</li>
<li>Options</li>
</ul>
</div>
</div>
https://www.codeply.com/go/6ZE3obnpuP
Also see
Bootstrap NavBar with left, center or right aligned items
Center Navbar in Bootstrap
Add the style
.nav{
text-align: center;
}
This will center the text in li.
Check Fiddle
These styles should be sufficient. You were trying to apply styles to to the wrong element.
// This is being applied by the bootstrap
// Set it to 25px instead of the default 15px
.navbar{
padding : 0 25px;
}
// Gave a width of 110px for each li
// as the container is following a fixed width format
li{
width:110px;
}
I am trying to recreate this nav menu in css - but I am having a hard time with getting bit rows to justify to each other correctly.
I'm not sure is formatting it as an li element is best - or should I try JS Buttons.
Any advice is appreciated.
I tried to put a picture up - but it doesn't look like a have enough reputation ponts - but just imagine all the buttons aligned justified.
I have a JS fiddle up here
<nav id="access" class="group" role="navigation">
<ul id="two">
<li>Home</li>
<li>About Us</li>
<li>PRODUCTS</li>
<li>EDUCATION</li>
<li>HISTORY</li>
<li>ALUMNI</li>
</ul>
<ul id="one">
<li>THE PHILLAPINES</li>
<li>INFORMATION</li>
<li>GERMANY</li>
<li>LONDON</li>
<li>Contact Us</li>
</ul>
</nav>
http://jsfiddle.net/mjkessel/jK26n/2/
For #access ul li add float: left; and for #one li and #two-li replace margin-right with margin-left and now try to combine. If you want to have all li with the same width set width for #access ul li