How to change this navar <a> when hover? (Bootstrap)

HTML & CSS
1

Hi guys,

I want to change the color of navar of this menu into “cyan”.
Below is the codes of the navar menu using Bootstrap


	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				
				<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
					<span class="icon-th-list"></span>
				</a>
				<a href="<?php echo base_url('admin/admin2/'); ?>" class="brand">&nbsp;&nbsp;&nbsp;Control Panel</a>
				<div class="nav-collapse collapse">
					<ul class="nav pull-right">
						<li class="dropdown">
			                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <b class="caret"></b></a>
			                <ul class="dropdown-menu">
			                  <li><a href="<?php echo base_url('admin/admin2/change_banner/'); ?>">Change Banner</a></li>
			                  <li><a href="<?php echo base_url('admin/admin2/banner_default/'); ?>">Default Banner</a></li>
			                  <li><a href="<?php echo base_url('admin/admin2/follow_links/'); ?>">Follow Links</a></li>
			                  <li><a href="<?php echo base_url('admin/admin2/number_records/'); ?>">Records per page</a></li>			                  			
			                  <li><a href="<?php echo base_url('admin/admin2/footer/'); ?>">Add Footer</a></li>
			                  <li><a href="<?php echo base_url('admin/admin2/footer_edit/'); ?>">Edit Footer</a></li>
			                  <li><a href="<?php echo base_url('admin/admin2/about/'); ?>">Add About</a></li>
			                  <li><a href="<?php echo base_url('admin/admin2/about_edit/'); ?>">Edit About</a></li>
			                  <li><a href="<?php echo base_url('admin/admin2/skin/'); ?>">Skin</a></li>
			                </ul>
						</li>
						<li class="dropdown">
			                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Manage Portfolio <b class="caret"></b></a>
			                <ul class="dropdown-menu">
			                  <li><a href="<?php echo base_url('admin/admin2/add_record/'); ?>">Add Record</a></li>
			                  <li><a href="<?php echo base_url('admin/admin2/ed_record/'); ?>">Edit/Delete Record</a></li>
			                </ul>
						</li>
						<li class="dropdown">
			                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin Login <b class="caret"></b></a>
			                <ul class="dropdown-menu">
			                  <li><a href="<?php echo base_url('admin/admin2/change_user/'); ?>">Change Username</a></li>
			                  <li><a href="<?php echo base_url('admin/admin2/change_pass/'); ?>">Change Password</a></li>
			                  <li><a href="<?php echo base_url('admin/admin2/change_email/'); ?>">Change Email</a></li>
			                  <li><a href="<?php echo base_url('admin/admin2/set_default_up/'); ?>">Change Default</a></li>
			                </ul>
						</li>						
						<li class="dropdown">
			                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Miscellaneous <b class="caret"></b></a>
			                <ul class="dropdown-menu">
			                  <li><a href="<?php echo base_url('admin/admin2/about_admin/'); ?>">About</a></li>
			                </ul>
						</li>						
					</ul>
				</div>
                     </div>
          </div>
</div>

I tried this,


.navbar .navbar-inverse .navbar-fixed-top > li > a:hover {
    color: cyan;
}

but failed.

By the way I’m using Boostrap ver. 2.3.1
Any help please.

Thanks in advanced.

2

The easiest way is to inspect the element in the :hover state and find the most specific selector that is giving the color.
If your CSS comes after that you can just copy and paste the selector - or make it slightly more specific by adding something e.g. div.navbar

3

@markbrown

Thanks 4 the advice.

This codes works,


.navbar-inverse .brand {
	color: blue;
}

But I wanted it while the mouse hover the link, and I tried these codes,


.navbar-inverse .brand > a:hover {
	color: blue;
}

and also this codes,


.navbar-inverse .brand a:hover {
	color: blue;
}

Unfortunately it did not work.

How to change color in hover?

Thanks in advanced.

4

You probably don’t need an address that specific; nevertheless, try this:

Change this:


.navbar .navbar-inverse .navbar-fixed-top > li > a:hover {
    color: cyan;
}

To this:


.navbar.navbar-inverse.navbar-fixed-top li > a:hover {
    color: cyan;
}

Let us know what happens.

5

@ronpat
Thanks dude but it fail.

6

solidcodes,

Where are you pasting the code? I copied your HTML and the css that I posted into a file on my PC and it works fine. Are you sure you copied it correctly?

7

@ronpat
I pasted it on cpanel2.css
http://coder9.com/jazportfolio/admin/admin2

8

By the way I also wanted to change the color of these,

Settings
Manage Portfolio
Admin Login
Miscellaneous

when the mouse hover those menu links.

How to do this?

Thanks in advanced.

9

I pasted it on cpanel2.css
I’m thinking it will over write the bootstrap.css?
Am I right or wrong?

10

solidcodes, I do not speak “Bootstrap”. Just CSS. If you will copy the code that you pasted into this forum to an HTML file, then copy the css that I posted into that same file at the top, it will work.

Understanding how Bootstrap works is up to you.