I have created a wizard using bootstrap and some custom styling
fiddle here
All I want to do now is add a couple of dashes (-) between the tabs
[One]----[2]----[3]
Can someone please help me out here.
Thanks,
Add them after your <a> tag
Like this:
<li class="active"><span id="t1" class="textColor">1</span>-----------
</li>
<li><span class="textColor">2</span>-------
</li>
<li><span class="textColor">3</span>----
Related
I have a menu structure I built in HTML+CSS that I would like to incorporate into a WordPress menu, but I am new to extending the Walker class and was wondering if someone could show me an example of how it might work. The code I would like to output is below:
<!-- Menu Start -->
<nav class="collapse navbar-collapse menu">
<ul class="nav navbar-nav sf-menu">
<li><a id="current" href="front-page.php">Current Page</a></li>
<li>Top Level Menu <span class="sf-sub-indicator"><i class="fa fa-angle-down"></i></span>
<ul>
<li>Child Link</li>
</ul>
</li>
<li>Another Link No Children</li>
</ul>
</nav>
<!-- Menu End -->
The nav and ul tags wrap the entire menu and do not need repeating.
The li for a single page without any child pages just needs an anchor tag inside of a bare li, except if the page is current, and add the appropriate id to the a tag.
If there is a parent item with children, display the parent link first with a "sf-with-ul" class on the a tag, then make another ul group with its li children have the same class as well.
Could anyone point me in the right direction here on how to accomplish this? Thank you.
Unfortunately I don't have a massive amount of time to write an example right now but I can send you the article that goes into decent detail on how to create walkers in WordPress.
How to add custom HTML to wp_nav_menu?
Using this as a guide it should be possible to add classes where you want to add them and structure your menu. If not I can try and whip an example up later.
I want a simple slide-down div-bar like on soundcloud, youtube, gmail
It is used in some really good websites with a menu dropdown, and I want to know how to do it using css or even jquery if needed. I can't post images yet, because i don't have enough reputaion yet... Here is the example on soundcloud
Check out this DEMO, it should help you for sure.
<nav id="main-nav">
<ul id="nav-primary">
<li>Menu 1
<ul class="subnav">
<li>beans
</li>
<li>pork chop
</li>
</ul>
</li>
</nav>
The css part is in the DEMO
The code:
<nav class='secondary-nav container'>
<ul>
<li>Customer Care</li>
<li class='dropdown'>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
Google
</li>
</ul>
</li>
<li>Sign Out</li>
</ul>
</nav>
I have jQuery, bootstrap-dropdown.js, and bootstrap.css incuded. jQuery is included before everything.
The dropdown menu is appearing by default before a mouse click or hover on the list element.
screenshot - http://cl.ly/image/41122D2Z3R38
Anyone know why?
Thanks!
Try This :
$('.dropdown-toggle').dropdown();
The thing without your css code we can not understand your problem.
But as I can see, you data attribute is correctly used, but are you linking you javascript files correctly?
"bootsrtap.js" and "Your jquery File"
The second thing look out on your javascript applying code.
The applying code of the nav menu of bootsrtap is :
$('.dropdown-toggle').dropdown();
try to revise your file codes and I think this will help you ^_^
I was just wondering what the general procedure is to style the tabs in the primary menu links. Where is the CSS that takes care of that? How can I change it? At the moment I have a Zen subtheme installed and I would like to completely restyle the tabs. The tabs' markup looks like this:
<div class="tabs">
<h2 class="element-invisible">Primary tabs</h2>
<ul class="tabs primary clearfix">
<li class="active"><a href="/drupal/user/1" class="active">
<span class="tab">View</span><span class="element-invisible">(active tab)</span></a>
</li>
<li><span class="tab">Venues</span></li>
<li><span class="tab">Events</span></li>
<li><span class="tab">Edit</span></li>
<li><span class="tab">Shortcuts</span></li>
<li><span class="tab">Devel</span></li>
</ul>
</div>
What I would like is to be able to change the background colour of the tabs as tehy are now (they are greyish). I've tried setting the background colour of the spans, li, and a elements but that didn't work.
Any ideas?
Thanks,
The answer is inside the tabs.css in the Zen theme - can't believe I didn't see it before!
I got a markup like below and without any styling, the Twitetr Bootstrap css seems to mess something such that the checkbox falls below the label text.What is the thing i got to change
<ul >
<li>
<label>1<input type="checkbox" id="chk1" name="chk1"></label>
</li>
<li>
<label>2<input type="checkbox" id="chk2" name="chk2"></label>
</li>
</ul>
screenshot http://img525.imageshack.us/img525/3390/savec.jpg
inputs-list doesn't seem to be a css class anymore. I used class="nav nav-list" instead.
Add the class "inputs-list" to your <ul>. Everything will magically work.