Solved

Styling Bootstrap 3.0 Dropdown Menu

Posted on 2014-03-27
2
3,509 Views
Last Modified: 2014-03-29
I'm having some issues styling bootstrap's dropdown menu.
I'm trying to make the hover background color on the dropdown links #2a040f

This is my first attempt to use bootstrap, so thanks for your help.

I'm not picking the right selectors or something, because I can't get it to work.
Any suggestions?

Thanks for your help!!!

<div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="navbar-collapse collapse ">
          <ul class="nav navbar-nav ">
            <li><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

Open in new window


/* Bootstrap Mods */
.navbar{
	background-color:#000000;	
	border-bottom:none !important;
}

.nav .navbar-nav > li:hover{
	background-color:#2a040f;
}

.navbar-nav a{
	color:#FFF !important;	
	font-size:18px;
	font-family: 'Alegreya Sans SC', sans-serif !important;

}

.navbar-nav, .dropdown:active{
	background:none !important;	
}

.navbar-nav .dropdown li a{
	color:#000 !important;
}	


.navbar .nav li {
z-index: 10000;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #FFF;
  background-color: #2a040f;
}

Open in new window

0
Comment
Question by:slightlyoff
2 Comments
 
LVL 5

Accepted Solution

by:
jayakrishnabh earned 500 total points
ID: 39961035
please add this style and try

a:hover {
            background-color: #2a040f;
        }
0
 
LVL 1

Author Comment

by:slightlyoff
ID: 39963886
Thank you!  Sorry I didn't get back to this question sooner, I wasn't able to try it out until this morning.

Appreciate the help!
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Max-width on individual images in grid 4 55
alert before form submission 6 40
How to loop bootstrap columns which contain database records 9 37
Remove lines by logo 2 29
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question