12-22-2017, 03:42 AM
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
You might have to adjust positioning, try this and it should work fine
Sorry for late response.
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.