I'm using a bootstram menu as with two level list with drop down. Exemple of code:
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Item0<span> class="caret"></span></a>
<ul class="dropdown-menu">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
</li>
<li>
<ul class="nav navbar-nav">
<li>Item13</li>
<ul class="dropdown-menu">
<li>Item131</li>
<li>Item132</li>
<li>Item133</li>
<li>Item134</li>
<li>Item135</li>
</ul>
<li>Item23</li>
<li>Item33</li>
</ul>
</li>
Css is bootstrap where i would like to make some modyfications of colours. However, when I make a change in:
.navbar-default .nav li a{
...
}
it changes all list elements colours. Is it possible to style nested lists in in different colour while level up list has a different one?
e.g. "Item0, Item13 Item23 Item33" in red, "Item1 .. Item5" in blue and so on...
you can style a specific group of elements by adding a class:
<li class="yourclass">Item1</li>
and then use CSS to style all the elements has the same class:
.yourclass { color: red }
I hope this helps
Sure: add a class to elements you want to color differently and style background there. Example
<ul class="dropdown-menu">
<li><a href="#Item1" class='red'>Item131</a></li>
<li><a href="#Item2" class='red'>Item132</a></li>
<li><a href="#Item3" class='blue'>Item133</a></li>
<li>Item134</li>
<li>Item135</li>
</ul>
And css
.red {
...
}
.blue {
...
}
I hope this helps
You can give additional class to the specific list items to overwrite the default design in booststrap.
for example :
<ul class="dropdown-menu">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
then in a new css file overwrite the default custom design.
.custom{
.....
}
I have been trying acc to waht you sugest but adding a class and styling dosn't work.
e.g.
.red {
color:red;
}
but
.red {
color:red !important;
}
start to works - can you explain me why???
Related
When designing a webpage using Zurb Foundation 6, top-bar-left and top-bar-right of the navigation menu stack when put into a wrap class, even when scaled to full screen. The top-bar-right ends up being just below and indented from top-bar-left. How do I fix this issue so that the top-bar-right section stays in line with top-bar-left and is not stacked?
The top-bar-right section works fine when the wrap class is not applied to a div within the nav class. I've tried only applying the wrap class to top-bar-left only instead of the entire nav class, and also tried a "float: right" for top-bar-right in CSS, but neither method solved the problem.
HTML code:
<!-- DESKTOP NAVIGATION -->
<nav class="top-bar">
<div class="wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
And the CSS:
/*GENERAL*/
.wrap {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
There are attributes on top-bar that are making its dependents display inline and stack for narrow displays (display: flex for one). You could apply all the appropriate attributes to the wrap class as well but why reinvent the wheel? Doesn't that negate the whole reason for using a grid system in the first place? Try removing the extra div and put the wrap class on the nav element instead:
<nav class="top-bar wrap">
<div class="top-bar-left">
<h3>Site Title</h3>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</nav>
Or to simplify things, you could just put those attributes on .top-bar and not have a wrap class:
.top-bar {
width: 90%;
max-width: 1100px;
margin: 0px auto;
}
If you need a wrapper div, put it outside top-bar, not inside.
I'm using Bootstrap with an Ember project, and following markup produces navigation tabs that work on the desktop, but fail in Chrome & Safari the iPhone 6.
Here is the markup produced:
<nav>
<ul class="nav nav-tabs">
<li id="ember611" class="ember-view active">
<a>Tab 1</a>
</li>
<li id="ember612" class="ember-view">
<a>Tab 2</a>
</li>
</ul>
</nav>
Tapping on Tab 2 doesn't work. Any suggestions?
Here is the HtmlBars that produces this HTML:
<nav>
<ul class="nav nav-tabs">
{{#link-to "foo.bar.tab1" tagName="li" role="presentation"}}
<a href={{view.href}}>Matches</a>
{{/link-to}}
{{#link-to "foo.bar.tab2" tagName="li" role="presentation"}}
<a href={{view.href}}>Standings</a>
{{/link-to}}
</ul>
</nav>
I'm using Bootstrap 3.3.4, and Ember 1.3
You're using your li elements as links when they really shouldn't be. That will work in some browsers but it's non-standard. I usually do something like this:
{{#link-to 'foo.bar.tab1' tagName='li' href='false'}}
{{link-to 'Matches' 'foo.bar.tab1' role='presentation'}}
{{/link-to}}
This will make the a tag the actual link (which will work across browsers), but will still add the active class to the li elements.
I do not know how to set even spacing in my navbar:
there is a bigger gap between Articles and User Profil than User Profil and Admin.
There is a bigger gap between Admin and DB than User Profil and Admin.
My code is:
<li class="blog-nav-item">
<a class="blog-nav-item" href="#" class="blog-nav-item active" data-toggle="dropdown" role="button" aria-expanded="false">Articles<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>All</li>
<li>Create New</li>
</ul>
</li>
<a class="blog-nav-item" href="/accounts/profil/">User Profil</a></li>
<a class="blog-nav-item" href="/admin/">Admin</a></li>
<li class="blog-nav-item">
DB<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>DB: JSON</li>
<li>DB: XML</li>
</ul>
</li>
That is because, by default, there is different margin spacing for a simple list element and a drop down menu.
Override the settings by:
.blog-nav-item > a{
margin-right:10px;
}
.blog-nav-item > .dropdown-menu{
margin-right:10px;
}
Adding these classes to the css will help
I am trying to achieve an iOS kind of look on a Zurb' Foundation 5 top menubar. I would like to have a icon font icon on top and the matching menu description below. Something that would look like this:
This is what I got now:
Having an icon first and following text is trivial with icon fonts:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Site name</h1>
</li>
</ul>
<section class="top-bar-section">
<ul>
<li class="show-for-medium-up" id="people-menu" data-tooltip data-options="disable_for_touch:true" title="People"><i class="fi-results-demographics"></i> <span class="menu-heading"> option 1 </span></li>
<li id="assets-menu" data-tooltip data-options="disable_for_touch:true" title="Assets"><i class="fi-euro"></i> <span class="menu-heading"> option 2 </li>
<li id="documents-menu" data-tooltip data-options="disable_for_touch:true" title="Documents"><i class="fi-page-edit"></i> option 3 </li>
<li id="services-menu" data-tooltip data-options="disable_for_touch:true" title="Services"><i class="fi-info"></i> Option4 </li>
<li class="divider"></li>
<li id="login-menu" data-tooltip data-options="disable_for_touch:true" title="Sign in"><i class="fi-key"></i> </li>
<li id="logout-menu" data-tooltip data-options="disable_for_touch:true" title="Sign out">Example login <i class="icon-bell color6"></i> </li>
</ul>
</section>
Adding a < br > before the span does not help as it breaks the top bar even if span has zero margin/padding in CSS.
How can I get the icon and text stack up nicely above each other?
You'll need to override a few default Foundation styles, but it's definitely possible.
Give these styles a try:
.top-bar ul>li a:not(.button) {
line-height: 1em;
padding-top: 8px;
}
.top-bar ul>li a i {
display: block;
height: 16px;
margin: auto 0;
line-height: 1em;
text-align: center;
}
You'll likely need to adjust both the padding-top, line-height, and icon height values to match your particular design.
I have an issue when rendering templated items within a ul with some pre-defined li elements, that i'd like the templating engine to respect:
This is what I'm trying to achieve:
<ul data-bind="{template: {name: itemTemplate, foreach: itemsToRender}}">
<li class="first">some pre-info</li>
//this is where I'd like knockout to render my templates
<li class="last">som-post info</li>
</ul>
This is what I actually get:
<ul data-bind="{template: {name: itemTemplate, foreach: itemsToRender}}">
//this is where all my templateItems get rendered
<li class="first">some pre-info</li>
<li class="last">som-post info</li>
</ul>
An obvious alternative is to use a template that rendered the entire ul, and looped over the child items, but this would render the entire template every time there was a change, and not just the updated items (li), which is the preferred way.
The best option is to use the containerless control-flow bindings available in KO 1.3 (in RC).
It would look like:
<ul>
<li class="first">some pre-info</li>
<!-- ko foreach: itemsToRender -->
<li class="item" data-bind="text: name"></li>
<!-- /ko -->
<li class="last">some post-info</li>
</ul>
or
<ul>
<li class="first">some pre-info</li>
<!-- ko template: { name: 'itemTemplate', foreach: itemsToRender } -->
<!-- /ko -->
<li class="last">some post-info</li>
</ul>
<script id="itemTemplate" type="text/html">
<li class="item" data-bind="text: name"></li>
</script>
Sample: http://jsfiddle.net/rniemeyer/tzJU3/