Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Styling Bootstrap 3.0 Dropdown Menu

Posted on 2014-03-27
2
Medium Priority
?
3,678 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 2000 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…
Suggested Courses

618 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