I have Bootstrap 3 integrated into my web application. I am trying to style secondary/drop-down menus from the main nav so the items are displayed inline. The Bootstrap 3 class for this is <ul class="list-inline"> (that obviously being the nested one), but it is not working.
I see the associated CSS rules come through in Chrome devtools, so it's not a cache issue. The class and rules are being applied, and the declaration is not being overridden (no strike-through line). The markup structure is as follows:
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="navbar navbar-nav">
<li class="dropdown open">
<a class="dropdown-toggle" data-toggle="dropdown" href="/item1">Item 1</a>
<ul class="dropdown-menu list-inline">
<li>SubItem 1</li>
<!-- Some more secondary nav <li>'s here... -->
</ul>
</li>
<!-- Some more primary nav <li>'s here... -->
</ul>
</div>
There are many style rules being applied to the various classes here, so I'm only pasting in the CSS for the nested <ul>...
.dropdown.open .dropdown-menu {
margin-top: 3em;
background-color: #525252;
}
/* I didn't write any of these styles - maybe Bootstrap's? */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 10000;
<strike>display: none;</strike>
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
<strike>background-color: blah blah</strike>
<strike>border: blah blah</strike>
border: 1px solid rgba(0, 0, 0, 0.15);
background-clip: padding-box;
}
...and the child list items...
.list-inline > li:first-child {
padding-left: 0;
}
.list-inline > li {
display: inline-block;
<strike>padding-left: 5px;</strike>
padding-right: 5px;
}
I have also tried manually adding display: inline and inline-block, as well as float: left, but nothing has worked. If it's relevant, I'm using Sass (SCSS) for the CSS, and the Sass 3.2.3 and Bootstrap gems (this is a Rails app). The styles are all compiling into one big application.css file using #import directives.
Related
This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 1 year ago.
I've seen other posts similar to this but they didn't seem to provide a solution. I'm kaing a js calendar and the days are inside a however I cannot get the items to align left, it seems like they are padded on the left side see img below.
I am hoping someone can tell me if theres a way to remove this ghost padding?
many thanks :)
I have included my current code and the css classes I'm currently using. I have a few vue inline styles but
<!--jan-->
<div v-if="month==1" class="month">
<div>
<div>
<b>January</b><br><span> {{this.year}}</span>
</div>
<div>
<ul v-bind:style="{ 'display': 'flex', 'justify-content':'space-between'}">
<li class="prev">❮</li>
<li class="next">❯</li>
</ul>
</div>
</div>
<ul class="weekdays">
<li class="days">Mo</li>
<li class="days">Tu</li>
<li class="days">We</li>
<li class="days">Th</li>
<li class="days">Fr</li>
<li class="days">Sa</li>
<li class="days">Su</li>
</ul>
<ul class="daysList">
<li class="daynum">1</li>
<li class="daynum">2</li>
<li class="daynum">3</li>
<li class="daynum">4</li>
<li class="daynum">5</li>
... etc
</ul>
</div>
<!--jan-->
////css//////
.daysList{
width: 100%;
list-style: none;
display: flex;
flex-wrap: wrap;
text-align: left;
justify-content: left;
background: rgb(231, 131, 131);
}
.daysList li{
background-color: lime;
display: inline;
margin: .5em;
width: 22px;
padding: 5px;
}
.daysList li:hover{
cursor:pointer;
color:white;
background-color: blue;
}
The <ul> has some margin and padding added by the user agent stylesheet. You can remove them from your calendar component's <ul>s with:
<style scoped>
ul {
margin: 0;
padding: 0;
}
</style>
demo
I'm a relative newcomer to web design - after learning the basics a while ago (and promptly forgetting them), I started reading about it a few months ago. I've begun to make my own web pages in order to test and improve my skills, but I'm having issues with getting my navigation bar to display properly. The HTML code for my navigation bar is as follows:
<div class="nav">
<ul class="nav">
<li class="nav"><a class="nav" href="#">Home</a></li>
<li class="nav"><a class="nav" href="#">Coffee</a></li>
<li class="nav"><a class="nav" href="#">Food</a></li>
<li class="nav"><a class="nav" href="#">Catering</a></li>
<li class="nav"><a class="nav" href="#">About</a></li>
<li class="nav"><a class="nav" href="#">Contact</a></li>
</ul>
</div>
<!--Navigation bar.-->
The CSS code for the pertinent elements (div, ul, li & a) is all listed below:
div{
border: 2px;
border-radius: 3px;
margin: 0 auto 60 auto;
padding: 10px;
width: 980;
}
/*BASIC DIV ELEMENT.*/
/*LINKS.*/
a{
color: #545454;
font-family: lucida grande, lucida sans, sans-serif;
font-size: 14px;
text-decoration: none;
}
a:hover, a:active {
color: #191919;
}
/*LINKS.*/
/*NAV BAR*/
a.nav:link{
background-color: #D7C5CC;
color: #191919;
display: inline-block;
padding: 15px;
text-align:center;
width: 90px;
}
a.nav:hover{
color: #191919;
background-color: #EDD9DF;
}
li.nav{
float: left;
}
ul.nav{
display: center;
margin: 0 auto 0 auto;
}
/*NAV BAR*/
I'm an absolute beginner when it comes to writing HTML and CSS code, so apologies if that was poorly done. I'm having trouble with the navigation bar on two fronts:
I can't get the corners of the navigation bar to round properly. I've previously altered ul.nav and li.nav to have "border-radius: 10;" as an attribute - both to no avail.
I can't get the navigation bar to center properly on my page (I'm testing it in Chrome). Every other div centers perfectly; and I've tried editing the "display" and "float" attributes to no effect.
I've searched through many similar posts on Stackoverflow, but none of the answers seemed to get the desired result.
EDIT: My goal is to have a continuous (where all of the buttons are "connected") navigation bar where only the outermost corners are rounded. For example:
http://cssmenumaker.com/menu/indented-horizontal-menu
All you need is to add this CSS:
ul.nav li:first-child a {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
ul.nav li:last-child a {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
Here is a jsFiddle if that helps too.
Also, if you want an exact copy of the example you gave a link to, then here's that jsFiddle.
Please check this: jsFiddle.
To add a border-radius, I added the following CSS:
a.nav:link {
border-radius: 10px;
}
To center the navigation menu, I added the following CSS:
ul.nav{
text-align: center;
}
I also removed the float: left property assigned to li.nav and added this new CSS to it:
li.nav{
display: inline-block;
}
well in first time your class is invalide because you apply the same in differents levels, if you have a css properties for your class this properties maybe will have conflicts or not work.
in this case my recomendation is:
<nav>
<ul class="navbar">
<li class="nav-item selected">Home</li>
<li class="nav-item">Coffee</li>
<li class="nav-item">Food</li>
<li class="nav-item">Catering</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<style>
nav{
position:fixed;
}
.nav-item{
color: #000;
border: 1px solid blue;
background-color: rgba(255, 255, 255, .6 )
}
.nav-item:hover
{
background-color: rgba(0, 255, 255, .6 )
}
.selected{
color: #058;
border: 1px solid red;
background-color: rgba(255, 0, 255, .6 )
}
nav: is html5 item to make navigation bars
class {
navbar: there is the ensamble of items, use for set general options, distribution, for all items in navbar.
nav-item: is for create options for every sngle item, is posible create effects.
selected: other class for marked a selected item, is possible use many class in the same item, only need write a space, with javascript is possible set or delete a class, in this this case
<script>
$(".nav-item").click(function(){
$(".nav-item").removeClass("selected");
$(this).className = $(this).className + "selected";
});
</script>
this function change the class selected to the item clicked.
}
the style is only an uggly example
I have a NavBar in my web-app using Ruby on Rails and Twitter Bootstrap.
The NAVBAR looks well in the browser as:
But, the Navbar breaks when I look up the web-app in the browser on my Galaxy Note.
Snippet from app/views/layouts/application.html.erb
<div class="masthead">
<h3 class="active">WebsiteName</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact Us</li>
<% if current_user %>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<strong><%= current_user.name %></strong>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Sign out</li>
</ul>
<% end %>
</ul>
</div>
</div>
</div>
</div>
The CSS for the NAVBAR is borrowed primarily from:
Justified Nav Example - http://getbootstrap.com/2.3.2/examples/justified-nav.html
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
How can I fix this? I am learning Responsive CSS these days, and have no idea how to fix it.
UPDATE:
Please note that the above problem has been fixed.
But I found something wrong when this got fixed though. If I decrease the size of window too much, the navbar gets broken. The User part goes outside the navbar. The issue is also reflected in the Bootstrap example too.
I'm attaching the screenshots which showcase the issue. To see it yourself, simply decrease the window size in the Bootstrap navbar example.
The problem is that the "Contact Us" link is wrapping. Notice that, in the Bootstrap example, the navbar does not have links with multiple words.
Add white-space: nowrap; to the .navbar .nav li a class.
Here is a functioning demo. All you have to do is resize the width of the frame to test.
The demo contains 2 navbars:
The first navbar with the issue fixed.
The second reproduces the faulty behavior to isolate the cause at the "Contact us" link, by setting its style attribute to "white-space: normal;" thus overriding the fix.
Also note that you have a </li> missing before <% end %>.
define the heihgt of .navbar .nav 40px and add overflow: hidden;
Your bootstrap file loading should look like the following to make the responsive work:
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-responsive.css" />
I am having problems getting text-overflow to work. I also cant get normal overflow:hidden to work either. Any ideas or suggestions?
Here is the css code without either. (Please note it is written in OOCSS / BEM syntax).
/* Base
=====================================================*/
/* Nav
=================================================*/
/* B
---------------------------------------------*/
.nav
{
margin-bottom: 24px;
margin-left: 0;
padding-left: 0;
list-style: none;
}
/* E
---------------------------------------------*/
.nav__item
{
float: left;
position: relative;
}
.nav__link
{
display: block;
color: inherit;
text-decoration: none;
}
and the HTML
<ul class="pivot nav" style="font-size:24px">
<li class="nav__item nav__item--active">
<a class="nav__link" href="#">
List Item 1
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">
List Item 2
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">
List Item 3
</a>
</li>
</ul>
I also tried wrapping it in a parent div and applies text-overflow / overflow to that..no luck.
I'm guessing that the lines wrap before any overflow rule kicks into action. You will need to do this to prevent line breaks:
.nav__item {
white-space: nowrap;
}
I'm not sure which element you want to hide the overflow on, so I created this fiddle: http://jsfiddle.net/bACQD/. Feel free to modify it to clear up any confusions.
adding display: inline-block; *display: inline; zoom: 1;
allows nowrap to work. It does not work on display:block;
I am trying to use two Twitter Bootstrap navs on the same page. I have written some css to style them. Problem is, I want the css to apply to just one of the navs. I tried to use css ids to distinguish the two navs, but am having trouble getting the selectors right. Can anyone help?
Here's a simplified version of what I'm trying to do: http://jsfiddle.net/XVReX/
HTML:
<div id="something" class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li id="selectEventStep"><a>Select Event</a>
</li>
<li id="selectPriceStep"><a>Select Price</a>
</li>
<li id="confirmSwapStep"><a>Confirm Swap</a>
</li>
</ul>
</div>
</div>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li id="selectEventStep"><a>Select Event</a>
</li>
<li id="selectPriceStep"><a>Select Price</a>
</li>
<li id="confirmSwapStep"><a>Confirm Swap</a>
</li>
</ul>
</div>
</div>
</div>
CSS:
#something.navbar #something.navbar-inner {
padding: 0;
background-image: -webkit-linear-gradient(top, #E5665D, #C4564F);
}
#something.navbar #something.nav li a {
font-weight: bold;
text-align: center;
color: #FFE2E0;
text-shadow: 0 1px 0 #000;
;
}
#something.navbar #something.nav li a:hover {
color: #fff;
}
Thanks!
The selectors are more complicated than necessary and the syntax is incorrect - you can override bootstrap.css by instead using:
#something .navbar-inner { }
#something .nav li a{ }
#something .nav li a:hover { }
jsFiddle
I rewrote the entire style sheet to apply the style only on those elements with a class name .bootstrap using sass compiler and regular expression which looks like this
audio.bootstrap:not([controls]) {
display: none;
}
html.bootstrap {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a.bootstrap:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
I haven't checked everything but I think it works alright.
http://jsfiddle.net/Lc5h6/