HippySunshine
Senior Member
So I've been playing around with a new theme on Wordpress which includes a multi level drop down menu.
I'm having issues with the responsive drop down and was hoping someone could shed some light as to what I've done wrong or what I need to do.
The code I have is:
(excuse the messy and excessive code, it needs tidying up but I've completely lost track of what I've broken in this lot)
.main-navigation {
display: block;
width: 100%;
}
.main-navigation ul {
text-align: center;
padding: 10px;
margin: 0;
display: none;
list-style: none;
}
.main-navigation li {
display: inline-block;
position: relative;
cursor: pointer;
}
.main-navigation a,
.main-navigation a:visited,
.main-navigation a:active {
color: #222 !important;
font-size: 0.7em;
font-family: 'Montserrat';
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 5px;
display: block;
padding: 10px 25px;
}
.main-navigation a:hover {
text-decoration: none;
}
.main-navigation ul ul a {
color: #222 !important;
padding: 20px 25px;
}
.main-navigation ul ul {
background: #eee;
float: left;
position: absolute;
top: auto;
left: -999em;
}
.main-navigation ul ul ul {
background: #eee;
left: -999em;
top: -10px;
}
.main-navigation ul ul ul ul {
background: #eee;
left: -999em;
top: -10px;
}
.main-navigation ul ul ul ul ul {
background: #eee;
left: -999em;
top: -10px;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a,
.main-navigation li.focus > a {
}
.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}
.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 100%;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
}
/* adds menu hamburger icon */
.menu-toggle:after {
font-family: FontAwesome;
font-style: normal;
content: "\f0c9";
display: inline-block;
margin-left: 5px;
}
/* adds arrow on drop down items */
.main-navigation ul li.menu-item-has-children > a:after {
margin-left: 5px;
content: "\25bc ";
position: absolute;
}
.main-navigation ul li ul li.menu-item-has-children > a:after,
.main-navigation ul li ul li ul li.menu-item-has-children > a:after {
margin-left: 5px;
content: "\25b6";
position: absolute;
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
color: #222 !important;
font-size: 1em;
font-family: 'Montserrat';
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 5px;
background: #faf1ea;
padding: 15px;
border: none;
display: block;
width: 100%;
outline: none;
}
.main-navigation.toggled ul {
background: #eee;
padding: 0;
}
.main-navigation.toggled ul li {
margin: 0;
display: block;
width: 100%;
}
.main-navigation.toggled ul li a {
border-bottom: 1px solid #ddd;
padding: 15px;
}
.main-navigation.toggled ul li:hover > ul,
.main-navigation.toggled ul li.focus > ul {
background: #fafafa;
display: block;
position: relative;
}
.main-navigation.toggled ul li ul li a {
width: 100%;
}
@media screen and (min-width: 1280px) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: block;
}
}
The link to the site I'm working on is http://ohlily.pixelboutique.co.uk
Thanks in advance for any help. My brain is shortly going to explode and I know it's probably something pretty simple.
I'm having issues with the responsive drop down and was hoping someone could shed some light as to what I've done wrong or what I need to do.
The code I have is:
(excuse the messy and excessive code, it needs tidying up but I've completely lost track of what I've broken in this lot)
.main-navigation {
display: block;
width: 100%;
}
.main-navigation ul {
text-align: center;
padding: 10px;
margin: 0;
display: none;
list-style: none;
}
.main-navigation li {
display: inline-block;
position: relative;
cursor: pointer;
}
.main-navigation a,
.main-navigation a:visited,
.main-navigation a:active {
color: #222 !important;
font-size: 0.7em;
font-family: 'Montserrat';
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 5px;
display: block;
padding: 10px 25px;
}
.main-navigation a:hover {
text-decoration: none;
}
.main-navigation ul ul a {
color: #222 !important;
padding: 20px 25px;
}
.main-navigation ul ul {
background: #eee;
float: left;
position: absolute;
top: auto;
left: -999em;
}
.main-navigation ul ul ul {
background: #eee;
left: -999em;
top: -10px;
}
.main-navigation ul ul ul ul {
background: #eee;
left: -999em;
top: -10px;
}
.main-navigation ul ul ul ul ul {
background: #eee;
left: -999em;
top: -10px;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a,
.main-navigation li.focus > a {
}
.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}
.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 100%;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
}
/* adds menu hamburger icon */
.menu-toggle:after {
font-family: FontAwesome;
font-style: normal;
content: "\f0c9";
display: inline-block;
margin-left: 5px;
}
/* adds arrow on drop down items */
.main-navigation ul li.menu-item-has-children > a:after {
margin-left: 5px;
content: "\25bc ";
position: absolute;
}
.main-navigation ul li ul li.menu-item-has-children > a:after,
.main-navigation ul li ul li ul li.menu-item-has-children > a:after {
margin-left: 5px;
content: "\25b6";
position: absolute;
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
color: #222 !important;
font-size: 1em;
font-family: 'Montserrat';
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 5px;
background: #faf1ea;
padding: 15px;
border: none;
display: block;
width: 100%;
outline: none;
}
.main-navigation.toggled ul {
background: #eee;
padding: 0;
}
.main-navigation.toggled ul li {
margin: 0;
display: block;
width: 100%;
}
.main-navigation.toggled ul li a {
border-bottom: 1px solid #ddd;
padding: 15px;
}
.main-navigation.toggled ul li:hover > ul,
.main-navigation.toggled ul li.focus > ul {
background: #fafafa;
display: block;
position: relative;
}
.main-navigation.toggled ul li ul li a {
width: 100%;
}
@media screen and (min-width: 1280px) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: block;
}
}
The link to the site I'm working on is http://ohlily.pixelboutique.co.uk
Thanks in advance for any help. My brain is shortly going to explode and I know it's probably something pretty simple.