I added a dropdown menu floated right in the Nav Bar but the styling is pulling from the <nav> Nav.CSS and making a big overlay on my nav bar and the dropdown is not located properly... I think it may need a new piece of CSS but I am unsure what to copy and rename to (<nav2> maybe??) The menu code is in: Navigation Templates>Nav
If you get a chance, please take a look and see what I am doing wrong!
I just noticed that there is no dropdown caret at the end of Content Menu either...
Here is a screen shot...
Hi Rocketfoot,
I just checked your website now, the dropdown in the breadcrumb should have a seperate class defined. nav2 is a good idea and you will also have to modify nav2 so that it doesn't have background. This is sample css for you
Code:
.toggle, [id^="drop"] {
display: none;
}
nav2 {
margin: 0;
padding: 0;
}
nav2::after {
display: table;
clear: both;
content: "";
}
nav2 ul {
list-style: outside none none;
margin: 0;
padding: 0;
position: relative;
}
nav2 ul li {
display: inline-block;
float: left;
margin: 0;
}
nav2 ul li > a:only-child::after {
content: "";
}
nav2 ul li > a::after {
content: " ";
display: inline;
font-family: fontawesome;
}
nav2 a {
color: #fff;
font-family: "Racing Sans One",cursive;
font-size: 14px;
text-decoration: none;
border-bottom: 3px solid #2F3540;
}
nav2 a:link {
color: #fff;
text-shadow: 1px 2px 3px #111;
text-decoration: none;
}
nav2 a:visited {
color: #fff;
text-shadow: 1px 2px 3px #111;
text-decoration: none;
}
nav2 a:hover {
background: #333;
border-bottom: 3px solid #2c82c9;
}
nav2 ul li ul li:hover {
background: #444 none repeat scroll 0 0;
}
nav2 ul ul {
display: none;
position: absolute;
top: 35px;
}
nav2 ul li:hover > ul {
display: inherit;
}
nav2 ul ul li {
display: list-item;
float: none;
position: relative;
width: 170px;
}
nav2 ul ul ul li {
left: 170px;
position: relative;
top: -60px;
}
nav2 ul li > a::after {
content: " ";
display: inline;
font-family: fontawesome;
}
nav2 ul li > a:only-child::after {
content: "";
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #2F3540;
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:hover .dropdown-content {
display: block;
}
@media all and (max-width: 768px) {
nav2 {
margin: 0;
}
.toggle + a, .menu {
display: none;
}
.toggle {
background: #2F3540;
border: medium none;
color: #ffffff;
display: block;
font-family: "Racing Sans One",cursive;
font-size: 14px;
padding: 12px 15px;
text-decoration: none;
text-shadow: 1px 2px 3px #000;
}
.toggle:hover {
background-color: #111;
border: medium none;
}
[id^="drop"]:checked + ul {
display: block;
}
nav2 ul li {
display: block;
width: 100%;
}
nav2 ul ul .toggle, nav2 ul ul a {
padding: 0 40px;
}
nav2 ul ul ul a {
padding: 0 80px;
}
nav2 a:hover, nav2 ul ul ul a {
background-color: #111;
text-decoration: none;
}
nav2 ul li ul li .toggle, nav2 ul ul a, nav2 ul ul ul a {
color: #ffffff;
font-size: 12px;
padding: 10px 15px;
}
nav2 ul li ul li .toggle, nav2 ul ul a {
background-color: #212121;
}
nav2 ul ul {
color: #ffffff;
float: none;
position: static;
}
nav2 ul ul li:hover > ul, nav2 ul li:hover > ul {
display: none;
}
nav2 ul ul li {
display: block;
width: 100%;
}
nav2 ul ul ul li {
position: static;
}
}
@media all and (max-width: 420px) {
nav2 ul li {
display: block;
width: 100%;
}
.dropdown:hover .dropdown-content {
display: block;
width: 100%;
}
}
@media only screen and (min-width: 769px) {
nav2 ul {
margin-left: 5%;
margin-right: 5%;
}
nav2 ul ul {
margin-left: 0;
}
}
You might have to adjust positioning, try this and it should work fine
Sorry for late response.
Perfect! It looks good now!
How do I get the down caret to show at the end of the Content Menu label?
You need to add the caret down after the text, simple font awesome icon. Check the dropdown example I have added