I'm creating a navbar using MaterializeCSS and I added some code to change the color of the items when hover. But, when I add a class "active" to the li I don't know how to change the background color and the text color of the navbar item.
<nav class="navbar-fixed">
<div class="nav-wrapper">
<a href="lobby.php" class="brand-logo center">
<img id="logo" src="images/logo.png"/>
</a>
<i class="material-icons">menu</i>
<ul class="left hide-on-med-and-down">
<li>Item1</li>
<li class="active">Item2</li>
<li>Item3</li>
</ul>
</div>
</nav>
My CSS:
nav.navbar-fixed {
background: white;
border: none;
box-shadow: none;
height: 70px;
}
.navbar-fixed .nav-wrapper {
background: white;
margin: 20px;
}
.navbar-fixed .nav-wrapper > ul > li > a {
color: #faa61a;
}
.navbar-fixed .nav-wrapper > ul > li > a:hover {
color: white;
}
.navbar-fixed .nav-wrapper > ul > li:hover {
background-color: #faa61a;
}
.navbar-fixed .nav-wrapper .brand-logo img {
height: 45px;
}
.navbar-fixed .nav-wrapper .button-collapse i {
color: black;
}
When I hover it, it's working OK, but when I set an item as active, it's using its default background-color and color.
Active is a class defined in materialise css.
nav ul li.active {
background-color: rgba(0, 0, 0, 0.1);
}
You can change the color or specify any other rule by overriding this class. If this doesn't help, Can you please put the code on fiddle and share the link?
Related
In my navigation links when I hover over a particular <li> the background color changes. That's what I want. But when I shift the mouse cursor to its child menu list (drop down content), the background color of the parent <li> changes to something else. I tried giving !important on its focus, before, after, active everything but nothing seems to work. When I hover on that particular <li> to get the sub menu the background color changes fine but when I move over to the sub menu its background color changes again. Also, please note that when I shift my cursor to the next <li> item its still working fine. The problem is occurring only when my cursor goes down to the dropdown menu. I am using Bootstrap v3.3.6.
CSS
#category-navi .cats-menu {
width: 100%;
background: rgba(0,0,0,0.6);
position: fixed;
margin-top: 60px;
z-index: 100;
border-top: 1px solid rgba(0,0,0,0.5);
}
.parent-menu .navbar-collapse {
padding-left: 0px;
}
.parent-menu .nav li > a:hover {
background-color: rgba(0,0,0,0.6);
color: #fff;
}
.parent-menu .nav li > a:after {
background-color: rgba(0,0,0,0.6);
color: #fff;
}
.mega-dropdown {
position: static !important;
}
.dropdown-toggle a:hover {
background-color: rgba(0,0,0,0.8) !important;
color: #fff;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
color: #222;
padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: underline;
background-color: none !important;
}
.mega-dropdown-menu .dropdown-header {
font-size: 18px;
color: #ff3546;
padding: 5px 60px 5px 5px;
line-height: 30px;
}
.dropdown-toggle {
color: #fff;
}
.mega-dropdown ul {
margin-top: -1px !important;
margin-left: -1px !important;
border-top: none !important;
}
HTML
<section id="category-navi">
<div class="cats-menu" id="cats-menu">
<div class="container">
<div class="parent-menu">
<nav class="navbar">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
{foreach from=$cats item=cat}
<li class="dropdown mega-dropdown">
{$cat.name} <span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
{foreach from=$cat.categories item=subcat}
<li class="col-sm-3">
<ul>
<li class="dropdown-header">{$subcat.sc_name}</li>
{foreach from=$subcat.ccname item=childcat}
<li>{$childcat.cc_name}</li>
{/foreach}
</ul>
</li>
{/foreach}
</ul>
</li>
{/foreach}
</ul>
</div><!-- /.nav-collapse -->
</nav>
</div>
</div>
</div>
</section>
change: .parent-menu .nav li > a:hover
to: .parent-menu .nav li > .dropdown-toggle:hover
I'm using CSS to style some of my link on my website I'm making for school, but I've ran into a problem. One bit is styled with CSS so its can be used as navigation menu. The other links are regular links with some styling.
The navigation menu has to be in the div tag for the regular link styling too, otherwise the background will not cover the whole page.
The problem is, since the div of the nav menu is placed within the styling of the other links, the effect of both styles get applied to the navigation menu.
Is there a way to give the styling of the navigation menu a higher priority than those of the other links, so that only the styling of the navigation menu will be applied?
Here's the CSS of the navigation menu:
/* styling voor navigation menu */
.nav ul {
list-style: none;
background-color: #525252;
text-align: center;
padding: 0;
margin-left: 400;
margin-right: 400;
border-radius: 10px;
border: 1px solid black ;
color: #fff;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 30px;
height: 30px;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #404040;
}
.nav a.active {
background-color: #404040;
color: #fff;
cursor: default;
}
.nav li {
width: 110px;
height: 40px;
line-height: 40px;
font-size: 1.2em;
}
.nav li {
display: inline-block;
margin-right: -4px;
}
/* extra class voor meescrollen menubalk */
.main-nav-scrolled {
position: fixed;
top: 0;
z-index: 9;
text-align: center;
width: 41%;
background: #858585
}
here's the CSS of the other links:
/* links voor onderste gedeelte pagina */
.bottom a:link {
text-decoration: none;
color: inherit;
}
.bottom a:visited {
text-decoration: none;
color: inherit;
}
.bottom a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all 0.3s;
}
.bottom a:hover {
color: inherit;
border-color: inherit;
}
And here is the important bit of HTML:
<div class="bottom">
<!-- navigation balk bovenin pagina -->
<div class="nav">
<ul>
<li class="Pokémon"><a class="active" href="SQLpokemondb.php">Pokémon</a></li>
<li class="Types">Types</li>
<li class="Abilities">Abilities</li>
<li class="Natures">Natures</li>
<li class="Stats">Stats</li>
</ul>
</div>
<?php
echo " <span style='color:$color'><a href='SQLdetailtypendb.php?id=" . $data['type_id'] . "'>" . $type1 . '</span></a>';
?>
</div>
Thanks in advance!
-Gijs
if you add styles to .bottom a that are not given to .bottom .nav a like background: green it will become a style to .bottom .nav a also. All styles need to be overwritten if you want custom styles only for .bottom .nav a
because .nav a is a descendant of .bottom , even if you write a very specific path eg .bottom .nav ul li a , it will inherit from .bottom a
the styles that are 'unique'
for example
snippet not good for you ( .nav li a inheriting background: green style from .bottom a because it doesn't have a background style for its self )
.bottom .nav a:hover { color:red;}
.bottom a:hover { color:yellow;background:green}
<div class="bottom">
<!-- navigation balk bovenin pagina -->
<div class="nav">
<ul>
<li class="Pokémon"><a class="active" href="SQLpokemondb.php">Pokémon</a></li>
<li class="Types">Types</li>
<li class="Abilities">Abilities</li>
<li class="Natures">Natures</li>
<li class="Stats">Stats</li>
</ul>
</div>
</div>
snippet good ( disable background:green from .bottom a by adding background:none or background: anythinghere image or color etc. for .bottom .nav li a )
.bottom .nav a:hover { color:red;background:black}
.bottom a:hover { color:yellow;background:green}
<div class="bottom">
<!-- navigation balk bovenin pagina -->
<div class="nav">
<ul>
<li class="Pokémon"><a class="active" href="SQLpokemondb.php">Pokémon</a></li>
<li class="Types">Types</li>
<li class="Abilities">Abilities</li>
<li class="Natures">Natures</li>
<li class="Stats">Stats</li>
</ul>
</div>
</div>
So what you're going to want to do first is add a new class to all the links in your nav, for example:
<li class="Types"><a class="new-class-here" href="Over ons.html">Types</a></li>
Then in your css for the nav you will use .nav a.new-class-here instead of .nav a, .nav a.new-class-here:hover instead of .nav a:hover, and so forth.
Then in your css for the other regular links you will want to use .bottom a:not(.new-class-here) instead of .bottom a. What this does is selects all the links in .bottom that do not have that new class we created. So now your nav styles will only apply to your nav links and your regular styles will only apply to the non-nav links.
You can learn more about :not() here if you want: https://developer.mozilla.org/en-US/docs/Web/CSS/:not
I'm working on a pure CSS dropdown menu but ran into some alignment issues.
Specifically: the sub-menu items get moved over to the right when hovering over their respective menu item. Here's the fiddle: https://jsfiddle.net/fhakjnhe/5/
HTML
<body>
<header>
<div id="menustrip">
<div id="logo_container">
<h1>LOGO</h1>
</div>
<div id="menu">
<nav>
<ul>
<li><a id="active-page" href="#">AAA</a></li
><li>BBB
<ul>
<li style="background-color:red;">A</li>
<li>B</li>
</ul>
</li
><li>CCC</li
><li>DDD</li
><li>EEE
<ul>
<li style="background-color:blue;">A2</li>
<li>B2</li>
</ul>
</li
><li>FFF</li
><li><a id="quote-page" href="#">GGG</a></li>
</ul>
</nav>
</div>
</div>
Related CSS
header #menustrip #menu nav ul
{
list-style: none;
position: relative;
}
header #menustrip #menu nav ul li
{
display: inline-block;
}
header #menustrip #menu nav a
{
display: block;
color: #1d120c;
font-weight: bold;
font-size: 18px;
padding: 0 /*15px*/10px;
margin: 0;
border: 2px solid transparent;
}
header #menustrip #menu nav a:hover
{
border-left: 2px solid #97bc14;
border-right: 2px solid #97bc14;
color: #97bc14
}
header #menustrip #menu nav a#active-page
{
color: #97bc14
}
header #menustrip #menu nav a#quote-page
{
margin-left: 15px;
border: 2px solid #97bc14;
color: #97bc14
}
header #menustrip #menu nav a#quote-page:hover
{
border: 2px solid #97bc14;
background-color: #97bc14;
color: #fcffff;
}
header #menustrip #menu nav ul li ul
{
/*display: none;*/
position: absolute;
padding-left: 0;
}
header #menustrip #menu nav ul li:hover > ul
{
display: inherit;
}
header #menustrip #menu nav ul li ul li
{
/*left: -100%;*/
min-width: 100px;
float: none;
display: list-item;
position: relative;
}
I checked a similar question CSS Drop Down Menu : nav ul ul li Moved to Right and checked that margin and padding were set to 0. Also in my case, the sub-item moves to the right when hovering, it seems to remain okay while "hidden".
On line 94 of the CSS file, change display: inherit; for display: block;. The inherit property is displaying the dropdown menu as an inline-block.
i suggest you to use software Web menu maker & button maker
this software let you to create professional and beautiful menus and buttons with java script or only css.
http://www.easymenumaker.com/
I'm trying to turn off the hover for the current page in a navigation menu.
div.nav {
width: 100%;
padding: 6px;
height: 40px;
}
.nav li {
color: #FFFFFF;
display: inline;
list-style-type: none;
text-align: center;
text-transform: uppercase;
padding: 20px;
margin: 0px;
height: 40px;
}
li.current {
background-color: #424242
}
li.current:hover {
background-color: inherit;
}
.nav li:hover {
background-color: #737373;
<div class="nav">
<ul>
<li class="current">Home</li>
<li>About
</li>
<li>Contact
</li>
<li>Gallery
</li>
</ul>
</div>
Here is the jsfiddle:
https://jsfiddle.net/swordams/jk6z5aqj/
I want the li for home to stay dark and not change on hover. I've tried setting the hover background color to "inherit", but that doesn't work.
Thanks!
You can use the CSS :not() pseudo-class:
.nav li:hover:not(.current) {
background-color: #737373;
}
jsFiddle example
You can use the solution by j08691 but ultimately, the problem with your css is that .nav li:hover is more specific than li.current:hover. Tacking a .nav will do the trick.
.nav li.current:hover {
background-color: inherit;
}
just make the active/current li background color important
li.current {
background-color: #424242 !important;
}
I'm using the CSS lines below for a menu on a webpage.
The problem is that I don't know how to make that code apply only to the menu, and not to other ul -unordered lists- on the page!
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #AAF7BB;
font-size: 110%;
}
ul li:hover {
background: #ffffff;
color: #000000;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ffffff;
display: block;
color: #00ff00;
}
ul li ul li:hover { background: #ffffff; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
Please help.
Try marking your ul as a class and refer to that instead of just ul.
<ul class="menu">
and change all instances of ul in the css to .menu.
Refering to just "ul" will apply the change to all ul elements.
As mentioned you can do this using classes on your html. I would try and Google this a little more. There are tons of example for menus out there.
In the top three is this:
http://www.noupe.com/essentials/freebies-tools-templates/100-great-css-menu-tutorials.html
Something simple:
<ul class="menu">
<li class="menu-option">
Home
</li>
<li class="menu-option active">
About
</li>
<li class="menu-option">
Contact
</li>
<ul class="sub-menu">
<a>Something to click</a>
<li class="menu-option">
Contact
</li>
<li class="menu-option">
Contact
</li>
</ul>
</ul>
Your css would need to be updated similar to below
ul.menu:{
/*Your style for the menu*/
}
ul.menu li.menu-option:{
/*Your style for the menu's options*/
}
ul.menu ul.sub-menu:{
/*Your style for the menu's sub-menu's*/
}
Use the class or id attributes alongside your HTML elements. For example:
HTML
<ul class="class1">
...
</ul>
<ul class="class1">
...
</ul>
<ul id="class2">
...
</ul>
CSS
.class1{
implement css styling here
}
#class2{
implement css styling here
}
Here, the top 2 ul elements will be styled by the .class1 CSS styling, the final ul with the attribute #class2 will be styled by the corresponding CSS.
Note that . denotes classes in CSS and # denotes IDs
IDs are unique, classes are not unique. More information