SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

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

    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
    Code:
    	<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,
    Code:
    .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.
    I Love coding...
    Don't click this link.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @markbrown

    Thanks 4 the advice.

    This codes works,
    Code:
    .navbar-inverse .brand {
    	color: blue;
    }
    But I wanted it while the mouse hover the link, and I tried these codes,
    Code:
    .navbar-inverse .brand > a:hover {
    	color: blue;
    }
    and also this codes,

    Code:
    .navbar-inverse .brand a:hover {
    	color: blue;
    }
    Unfortunately it did not work.

    How to change color in hover?

    Thanks in advanced.
    I Love coding...
    Don't click this link.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    You probably don't need an address that specific; nevertheless, try this:

    Change this:
    Code:
    .navbar .navbar-inverse .navbar-fixed-top > li > a:hover {
        color: cyan;
    }
    To this:
    Code:
    .navbar.navbar-inverse.navbar-fixed-top li > a:hover {
        color: cyan;
    }
    Let us know what happens.

  5. #5
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @ronpat
    Thanks dude but it fail.
    I Love coding...
    Don't click this link.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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. #7
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @ronpat
    I pasted it on cpanel2.css
    http://coder9.com/jazportfolio/admin/admin2
    I Love coding...
    Don't click this link.

  8. #8
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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.
    I Love coding...
    Don't click this link.

  9. #9
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I pasted it on cpanel2.css
    I'm thinking it will over write the bootstrap.css?
    Am I right or wrong?
    I Love coding...
    Don't click this link.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •