my drop down menu is behind content, i am just a beginner so need your help
-
Hi readers, i am using modality theme, and in that my drop down menu is behind content and since i am not that much into coding so need your help, given below is the drop down menu css,
‘
/* sub menus arrows on desktop */
.navbar-nav:not(.sm-collapsible) ul .caret {
position: absolute;
right: 0;
margin-top: 6px;
margin-right: 15px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px dashed;
}
.navbar-nav:not(.sm-collapsible) ul a.has-submenu {
padding-right: 30px;
}
/* make sub menu arrows look like +/- buttons in collapsible mode */
.navbar-nav.sm-collapsible .caret,
.navbar-nav.sm-collapsible ul .caret {
position: absolute;
right: 0;
margin: -3px 15px 0 0;
padding: 0;
width: 32px;
height: 26px;
line-height: 24px;
text-align: center;
border-width: 1px;
border-style: solid;
}
.navbar-nav.sm-collapsible .caret:before {
content: ‘+’;
font-family: monospace;
font-weight: bold;
}
.navbar-nav.sm-collapsible .open > a > .caret:before {
content: ‘-‘;
}
.navbar-nav.sm-collapsible a.has-submenu {
padding-right: 50px;
}
/* revert to Bootstrap’s default carets in collapsible mode when the ‘data-sm-skip-collapsible-behavior’ attribute is set to the ul.navbar-nav */
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] .caret, .navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] ul .caret {
position: static;
margin: 0 0 0 2px;
padding: 0;
width: 0;
height: 0;
border-top: 4px dashed;
border-right: 4px solid transparent;
border-bottom: 0;
border-left: 4px solid transparent;
}
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] .caret:before {
content: ” !important;
}
.navbar-nav.sm-collapsible[data-sm-skip-collapsible-behavior] a.has-submenu {
padding-right: 15px;
}
/* scrolling arrows for tall menus */
.navbar-nav span.scroll-up, .navbar-nav span.scroll-down {
position: absolute;
display: none;
visibility: hidden;
height: 20px;
overflow: hidden;
text-align: center;
}
.navbar-nav span.scroll-up-arrow, .navbar-nav span.scroll-down-arrow {
position: absolute;
top: -2px;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
overflow: hidden;
border-top: 7px dashed transparent;
border-right: 7px dashed transparent;
border-bottom: 7px solid;
border-left: 7px dashed transparent;
}
.navbar-nav span.scroll-down-arrow {
top: 6px;
border-top: 7px solid;
border-right: 7px dashed transparent;
border-bottom: 7px dashed transparent;
border-left: 7px dashed transparent;
}
/* add more indentation for 2+ level sub in collapsible mode – Bootstrap normally supports just 1 level sub menus */
.navbar-nav.sm-collapsible ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul .dropdown-menu .dropdown-header {
padding-left: 35px;
}
.navbar-nav.sm-collapsible ul ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul ul .dropdown-menu .dropdown-header {
padding-left: 45px;
}
.navbar-nav.sm-collapsible ul ul ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul ul ul .dropdown-menu .dropdown-header {
padding-left: 55px;
}
.navbar-nav.sm-collapsible ul ul ul ul .dropdown-menu > li > a,
.navbar-nav.sm-collapsible ul ul ul ul .dropdown-menu .dropdown-header {
padding-left: 65px;
}
/* fix SmartMenus sub menus auto width (subMenusMinWidth and subMenusMaxWidth options) */
.navbar-nav .dropdown-menu > li > a {
white-space: normal;
}
.navbar-nav ul.sm-nowrap > li > a {
white-space: nowrap;
}
.navbar-nav.sm-collapsible ul.sm-nowrap > li > a {
white-space: normal;
}
/* fix .navbar-right subs alignment */
.navbar-right ul.dropdown-menu {
left: 0;
right: auto;
}.navbar ul {
float: right;
list-style: outside none none;
margin: 0;
padding: 0;
}#navbar ul.children {
height: auto;
width: 250px;
z-index: 99;
}.navbar {
height: auto;
margin: 0 auto;
max-width: 1200px;
position: relative;
width: 100%;
z-index: 99;
}.navbar {
margin-bottom: 0 !important;
}.navbar-collapse {
padding-left: 0 !important;
padding-right: 0 !important;
}.nav > li {
width: auto;
}.navbar-nav > li > a::after {
color: white;
content: ‘|’;
font-size: 1.1em;
opacity: 0.15;
position: absolute;
right: 3px;
top: 13px;
width: 1px;
}.navbar-nav > li > a {
transition: background-color 0.2s ease 0s;
}.navbar-nav ul li a {
font-weight: 700;
height: auto;
min-height: 37px;
padding: 15px 17px 0;
text-decoration: none;
width: auto;
word-wrap: break-word;
}.dropdown-menu li a:before {
font-family: ‘FontAwesome’;
content:’f054′;
font-size: 0.7em;
position: absolute;
left: 0;
visibility: hidden;
line-height: 2.1;
}.dropdown-menu li a:hover:before {
left: 20px;
visibility: visible;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}.dropdown-menu li a {
height: auto !important;
padding: 11px 37px !important;
margin: 0;
min-width: 16em !important;
border-bottom: 1px solid rgba(255,255,255,0.15);
}.dropdown-menu .dropdown-menu {
padding-top: 6px;
}.dropdown-menu {
min-width: 16em !important;
}.nav-bar {
clear: both;
margin: 0 auto;
max-width: 1080px;
min-height: 45px;
position: relative;
}ul.nav-bar,
div.nav-bar > ul {
margin: 0;
padding: 0 40px 0 0;
}.nav-bar li {
display: inline-block;
position: relative;
}.nav-bar li a {
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}.nav-bar li:hover > a,
.nav-bar li a:hover,
.nav-bar li:focus > a,
.nav-bar li a:focus {
color: #fff;
}.nav-bar .sub-menu,
.nav-bar .children {
background-color: #111111;
border-bottom: 2px solid #f7f5e7;
border-top: 0;
padding: 0;
position: absolute;
left: -2px;
z-index: 99999;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}.nav-bar .sub-menu ul,
.nav-bar .children ul {
border-left: 0;
left: 100%;
top: 0;
}ul.nav-bar ul a,
.nav-bar ul ul a {
color: #fff;
margin: 0;
width: 200px;
}ul.nav-bar ul a:hover,
.nav-bar ul ul a:hover,
ul.nav-bar ul a:focus,
.nav-bar ul ul a:focus {
color: #dd3333;
}ul.nav-bar li:hover > ul,
.nav-bar ul li:hover > ul,
ul.nav-bar .focus > ul,
.nav-bar .focus > ul {
clip: inherit;
overflow: inherit;
height: inherit;
width: inherit;
}.nav-bar .current_page_item > a,
.nav-bar .current_page_ancestor > a,
.nav-bar .current-menu-item > a,
.nav-bar .current-menu-ancestor > a {
color: #bc360a;
font-style: italic;
}.isStuck{
left:0px;
width:100%;
}The blog I need help with is: (visible only to logged in users)
-
Hello commontalent,
I’m afraid you posted in the wrong forum!
You appear to have a self-hosted site using the WordPress.org software, but this forum is for blogs hosted here on WordPress.com.The two versions are different and have separate forums.
Please post your question at the WordPress.org forum: https://wordpress.org/support/, where you will find the right people to help you sort your problem out.
If you don’t have a username at that forum, you’ll need to register before posting.Hope that helps!
- The topic ‘my drop down menu is behind content, i am just a beginner so need your help’ is closed to new replies.
WordPress.com Forums 