So, i want to make an active links in navbar, but it's working only on "Pocetna" page, but not on others...this is what i've done:
<nav>
<ul>
<li class="active">Pocetna</li>
<li>Forum</li>
<li>Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
and this is in my style.css :
nav li.active{
color: #CCCCCC;
}
I'm using bootstrap...
Did you create a HTML-file for each of your navlinks?
If you did, please do the following:
1. Go to your 'Forum' HTML index file, and change the Navbar to:
<nav>
<ul>
<li>Pocetna</li>
<li class="active">Forum</li>
<li>Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
2. Then go to your 'Galerija' HTML index file, and change the Navbar to:
<nav>
<ul>
<li>Pocetna</li>
<li>Forum</li>
<li class="active">Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
Do you understand where I'm going with this? You only need to add the class="active" to your active HTML index file.
Don't touch the CSS unless you wish to change the active color of your Navbar links.
Related
I am trying to hide an element until its previous sibling is hovered over, in css (or scss rather), it looks like this:
.menu-container {
// style with flex etc...
& .menu-item-link {
// style the link...
&+.sub-menu-container {
display: none;
}
&:hover+.sub-menu-container {
display: block;
}
}
}
<ul class="menu-container">
<li class="menu-item-container">
<a class="menu-item-link">Ingredients</a>
<ul class="sub-menu-container">
<li class="sub-menu-item-container">
<a class="sub-menu-link">Fruits</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Vegetables</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Dairy</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Children</a>
</li>
</ul>
</li>
</ul>
How do I achieve this using tailwind?
You're not actually trying to target a sibling in your code, you're trying to target a child element. This is a very simple process when you just want to show a sub-menu dropdown.
Just add group to the hover trigger (.menu-item-link in your case) and group-hover:[some-display-class] to the child. This way the child will change it's display property when the parent element (or itself) is hovered.
You should change your title, also I'd recommend that you don't use Tailwind with class names like that. Please see extracting components for the recommended way to use Tailwind CSS. Of course, you are free to use it how you want but you're better off with plain old CSS if you want to use SCSS and classes like that.
Example with your structure:
<ul>
<li class="group">
<a>Ingredients</a>
<ul class="hidden group-hover:block">
<li>
<a>Fruits</a>
</li>
<li>
<a>Vegetables</a>
</li>
<li>
<a>Dairy</a>
</li>
<li>
<a>Children</a>
</li>
</ul>
</li>
</ul>
Example on Tailwind Play https://play.tailwindcss.com/dFc2zlmqDA
Here is example for my code
<style>
.hover:hover,.active{color:red}
</style>
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
If you mouse over on blog, there will be two red words
i am trying to find a way to disable "home" when you mouse over any other word
and then it back red if you moved the mouse away
After long search with google, i finnally found javascript code
And tried to modify it to work, but no luck
Here is a pure CSS solution, that will work so long as you have a wrapper element for there li's, which you should.
<style>
.menu:hover .active {
color: black;
/*reset the color to the default*/
/*you could also use color: inherit*/
}
.hover:hover,
.active,
.menu:hover .active:hover {
color:red
}
</style>
<ul class="menu">
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
</ul>
One thing I am noticing right off is the improper markup
there is no
that may not have anything to do with it.
<style>
.hover:hover,.active{color:red}
</style>
<ul>
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
</ul>
not exactly sure what you are trying to do
here is a fiddle http://jsfiddle.net/happymacarts/tfqw93tk/
maybe paste the js code you found and see if we can figure out your issue
I have an html menu listing that look like this:
<ul id="navlist" class="clearfix">
<li class="home"></li>
<li class="xo">About Us</li>
<li class="xoxo">People</li>
<li class="xoxoxo">Business</li>
<li class="xo">News</li>
<li class="xoxo">Careers</li>
<li class="xoxoxo">Gallery</li>
<li class="xi">Contact Us</li>
</ul>
My challenge is ensuring the CMSListMenu apply the different classes to each li.
The li could styled each by using Edit > Document Properties > Navigation tab provided in portal engine.
It exposed the css styling of each page li. You can set the link, mouseover and current page classes.
I'm trying to implement a responsive jQuery navigation but I need to extend the default output of the WP menu. I need to wrap any pages that have children with a span and remove the link. For example:
<nav id="menu-right">
<ul>
<li>
<span>Friends</span>
<ul>
<li>Alexa</li>
<li>Alexander</li>
<li>Fred</li>
<li>James</li>
<li>Jefferson</li>
<li>Jordan</li>
<li>Kim</li>
<li>Meagan</li>
<li>Melissa</li>
<li>Nicole</li>
<li>Samantha</li>
<li>Scott</li>
</ul>
</li>
<li>
<span>Family</span>
<ul>
<li>Adam</li>
<li>Ben</li>
<li>Bruce</li>
<li>Eddie</li>
<li>Jack</li>
<li>John</li>
<li>Martina</li>
<li>Matthew</li>
<li>Olivia</li>
<li>Owen</li>
</ul>
</li>
<li>
<span>Work colleagues</span>
<ul>
<li>David</li>
<li>Dennis</li>
<li>Eliza</li>
<li>Larry</li>
<li>Lisa</li>
<li>Michael</li>
<li>Rachelle</li>
<li>Rick</li>
</ul>
</li>
</ul>
</nav>
Any ideas?
I'm creating a sidenav that has some major links that lead to a list of lesser links. A few of the lesser links are listed after the major links. Should I:
format the html like
<ul id="whatever">
<li id="child">
</li>
<li id="descendent">
</li>
</ul>
and use a ul id child selector;
or format the html like
<ul>
<li class="major">
</li>
<li class="minor">
</li>
</ul>
and use a li class selector;
or format the html like
<div class="left nav-major">
<ul>
<li>
</li>
</div>
<div class="left nav-minor">
<li>
</li>
</ul>
</div>
and use div selectors;
or do something else?
If I should do something else, what should it be?
Obviously, I'm trying to optimized load time.
CSS doesnt' really affect load time aside from how large your CSS file is.
In your examples, the first and second are exactly the same in terms of the HTML structure.
The 3rd example is not valid markup.
If you want to optimize load time, use the least amount of markup and CSS as you can.
That said, don't go overboard. There's a pragmatic middle-ground as you want to keep the markup semantic and human readable to make it maintainable.
Since a navigation list is typically a list of links, lists seem appropriate:
<ul>
<li>Main level link
<ul>
<li>Child level link</li>
</ul>
</li>
</ul>
And there'd be no need for classes, as you could reference the levels in your css as:
.navigation li {style main level links}
.navigation li li {style secondary level links}