My drop down menu on my navigation bar is called "Works". I can't seem to figure out why "Works" has a grey box surrounding the word while the other words on the navigation bar do not.
My CSS for the nav bar and drop down menu:
nav {
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
margin-bottom: 30px;
line-height: 1.5em;
text-decoration: none;
}
nav a, .dropbtn {
display: inline;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 25px;
font-family:"mrs-eaves";
}
.dropdown {
overflow: hidden;
}
.dropdown {
cursor: pointer;
font-size: 25px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: "mrs-eaves";
margin: 0;
text-decoration: none;
}
nav a:hover, .dropdown:hover .dropbtn, .dropbtn:focus
{
background-color: rgb(247, 219, 255);
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.show {
display: block;
Here is my html:
<nav>
<center>
Home
<button class="dropbtn" onclick="myFunction()">Works
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Drawing
Animation
Design
</div>
About
Contact
Links
</center>
</nav>
If it must be a button, add the following CSS
.dropbtn {
background: none;
border: none;
}
Then, in your CSS where you set the hover color, change it to this
nav a:hover, .dropdown:hover, .dropbtn:focus, .dropbtn:hover {
background-color: rgb(247, 219, 255);
}
Edit:
Added cursor change so its a pointer for consistency when the button is hovered.
JSFiddle
It is standard button style. So, if you want it to be transparent, you should add certain styling for your button class (.dropbtn).
It is,
.dropbtn {
background: none;
border: none;
}
Related
I've been fighting with this for a while now and have gone through the posts I could find here. I think my bootstrap.css is overriding the css I've added to my style.css. My dropdown button isn't clickable. I have tried everything I've seen in here: placing my custom css prioritized over bootstrap, I've tried editing the button and dropdown settings in bootstrap.css, etc. There's too much in my bootstrap to post here, but here's the code I'm trying to get working. I'm not sure if it's dropdown, button, navbar, etc that's causing the conflict.
HTML:
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
CSS:
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
EDIT:
Here's my bootstrap.css
I am trying to use Superfish jQuery menu in one of my websites. Results so far are rather dissapointing as I get nowhere near the same look and feel when I follow the install instructions shared (under Quick Start Guide).
My intention is for the menu to be at the very top of the page, fixed (so it does not disappear when scrolling down) and cover 100% width. Using this attribute (100% width) stops the drop-down menus from working in this basic CSS version (I am learning the ropes so I am most likely not coding properly) and I cannot figure out why.
Anyhow, I want to achieve the same with Superfish and I would appreciate some coding assistance, I do not require the specific color styling but "install instructions" (if that makes any sense) would be of great help.
See below current code:
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
Your help will be greatly appreciated.
For the basic CSS version, if you wrap it in a div and give that a position of fixed, top of 0 and width of 100% it does work.
Your code doesn't show any CSS showing position fixed anywhere.
.banner {
color: #000000;
font-size: 2em;
font-family: "Public Sans";
font-weight: bolder;
letter-spacing: -0.05em;
padding-left: 0.2em;
padding-right: 0.2em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d0d3d4;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #abacac;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #d0d3d4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #abacac;}
.dropdown:hover .dropdown-content {
display: block;
}
.fixed{
position:fixed;
width:100%;
top:0;
}
<div class="fixed">
<ul>
<!--- nothing --->
<li class="banner">nassau</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
<div style="margin-top:100px;height:1000px;">sssssssx</div>
So I made this navigation bar and there is 1 title which is a dropdown menu. This title has an other font then the others. If you hover over this dropdown menu, the links do have the right font. Can someone help me with this?
/* Navbar */
.topnav {
list-style-type: none;
overflow: hidden;
background-color: #363636;
box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
transition: all .2s ease-in;
font-weight: 700;
text-transform: uppercase;
}
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 24px 26px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: #bdbdbd;
}
.topnav .icon {
display: none;
}
/* Dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size:16px;
border: none;
outline: none;
color: white;
padding: 24px 26px;
background-color: inherit;
font-family:'PT Sans', sans-serif;
font-style: inherit;
margin: 0;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black ;
padding: 24px 26px;
text-decoration: none;
display: block;
text-align: left;
}
/* Background dropdown links */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<!-- Navbar -->
<div class="topnav" id="myTopnav">
<img src="img/logo.png" alt="logo" />
<div class="max-width">
<section class="gray">
Home
About
Gamemodes
Vote
<div class="dropdown">
<button class="dropbtn">Application </button>
<div class="dropdown-content">
Staff
Donators
</div>
</div>
STORE
☰
</div>
Navbar:
https://i.stack.imgur.com/CLEeO.png
Navbar with dropdown:
https://i.stack.imgur.com/kzEa7.png
The reason is because the rest of your nav links are a elements, but your rogue nav link is a button element.
If the drop-down button isn't meant to look different you could just remove the font styling from it:
/* Dropdown button */
.dropdown .dropbtn {
// font-size:16px;
border: none;
outline: none;
// color: white;
padding: 24px 26px;
background-color: inherit;
// font-family:'PT Sans', sans-serif;
font-style: inherit;
margin: 0;
}
And wrap an a element around the rogue nav link.
I write navbar component in my Angular 6 app.
<div class="navbar">
<ul>
<li>tekst</li>
<li>tekst</li>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</ul>
</div>
and .css file:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e8d625;
position: fixed;
top: 0;
width: 100%
}
li {
float: left;
}
li a {
display: block;
color: #090909;
text-align: center;
font-weight: bold;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #f7e525;
}
.active {
background-color: #f7e525;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #77ffb7;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #f7e525;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #80f987;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #80f987;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
but it's not working.
When I use the mouse, dropdown does not display anything.. It's difficult to say but I use https://www.w3schools.com/css/css_dropdowns.asp .
Do not I have any libraries?
And other question. Will I be able to use in dropdown later? Beacuse I use RoutingModule.
Very thanks for all answers.
EDIT:
add left navbar
<ul>
<li>Calendar</li>
<li>info1</li>
<li>info2</li>
<li>info3</li>
<li>info4</li>
</ul>
ul {
list-style-type: none;
margin-top: 45px;
padding: 0;
width: 200px;
background-color: #f1f1f1;
height: 100%;
position: fixed;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
You need to remove the overflow: hidden rule from ul, otherwise the dropdown won't be visible.
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #e8d625;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
li {
float: left;
}
li a {
display: block;
color: #090909;
text-align: center;
font-weight: bold;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #f7e525;
}
.active {
background-color: #f7e525;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: #77ffb7;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #f7e525;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #80f987;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
position: relative;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #80f987;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
ul.side {
list-style-type: none;
margin-top: 45px;
padding: 0;
width: 200px;
background-color: #f1f1f1;
height: 100%;
position: fixed;
z-index: 1;
}
.side li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
.side li a:hover {
background-color: #555;
color: white;
}
<div class="navbar">
<ul>
<li>tekst</li>
<li>tekst</li>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</ul>
</div>
<ul class="side">
<li>Calendar</li>
<li>info1</li>
<li>info2</li>
<li>info3</li>
<li>info4</li>
</ul>
I'm trying to create a simple dropdown menu (with only CSS) in a navbar with multiple links, the problem is that the dropdown menu will show with every link and not only with the desired one. Here is the code:
HTML & CSS
ul {
list-style: none;
}
.topNav {
background-color: #ff66b3;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
}
.topNav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 8px;
text-decoration: none;
font-size: 14px;
}
.topNav a:hover {
background-color: #ffb3d9;
color: black;
}
.dropDown {
display: none;
position: absolute;
z-index: 1;
min-width: 160px;
}
.dropDown a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.topNav .mainLink:hover .dropDown {
display: block;
}
<div class="topNav" id="myTopnav">
<a class="mainLink" id="menuIcon" href="#home">☰</a>
<a class="mainLink" href="#home">NerdBook</a>
<div class="dropDown">
News
Contact
About
</div>
</div>
The dropdown will have to show only on the "menuIcon" link.
You already have an ID on the <a> tag you want to trigger the :hover so use that as reference selector. Also your code doesn't work because .dropDown ins't a child of your link change it to match as sibling:
#menuIcon:hover ~ .dropDown
ul {
list-style: none;
}
.topNav {
background-color: #ff66b3;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
}
.topNav:after {
content:"";
display:table;
clear:both;
}
.topNav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 8px;
text-decoration: none;
font-size: 14px;
}
.topNav a:hover {
background-color: #ffb3d9;
color: black;
}
.dropDown {
background:#e1e1e1;
display: none;
position: absolute;
top:100%;
z-index: 1;
min-width: 160px;
}
.dropDown a {
float:none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#menuIcon:hover ~ .dropDown, .dropDown:hover {
display: block;
}
<div class="topNav" id="myTopnav">
<a class="mainLink" id="menuIcon" href="#home">☰</a>
<a class="mainLink" href="#home">NerdBook</a>
<div class="dropDown">
News
Contact
About
</div>
</div>