Solved

Styling Bootstrap 3.0 Dropdown Menu

Posted on 2014-03-27
2
3,599 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
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…

705 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