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
    936
    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.
    Quality codes are optimized and tested...
    Click here for inspiration..

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 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
    936
    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.
    Quality codes are optimized and tested...
    Click here for inspiration..

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 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
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @ronpat
    Thanks dude but it fail.
    Quality codes are optimized and tested...
    Click here for inspiration..

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 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
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @ronpat
    I pasted it on cpanel2.css
    http://coder9.com/jazportfolio/admin/admin2
    Quality codes are optimized and tested...
    Click here for inspiration..

  8. #8
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    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.
    Quality codes are optimized and tested...
    Click here for inspiration..

  9. #9
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    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?
    Quality codes are optimized and tested...
    Click here for inspiration..

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 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
  •