My Website: https://www.bestblogging.co.uk/
The navigation dropdown menu is not clickable, neither the home button! i’m not very much familiar with code developing, so couldn’t find the solution. I would appreciate your help.
Here is the CSS and HTML code.
Thanks.
The navigation dropdown menu is not clickable, neither the home button! i’m not very much familiar with code developing, so couldn’t find the solution. I would appreciate your help.
Here is the CSS and HTML code.
Thanks.
HTML:
body .navbar{height:auto;}
.dropdown-button {
position: relative; /* make the item be referred to as parent of the positioned child */
}
.dropdown-content {
position: absolute; /* remove the list from the natural flow */
top: 100%; /* place its top at the item bottom without a gap at any item height */
left: -9999px; /* hide the list well outside the viewport */
}
.dropdown-button:hover .dropdown-content {
left: 0; /* align the sublist with its parent item on hover */
}
.widget {
line-height: 1;
margin:0px;
}
.widget ul {
padding: 0;
margin: 0;
line-height: 1;
}
.widget li, .BlogArchive #ArchiveList ul.flat li {
padding: 0;
margin: 0;
text-indent: 0;
}
ul {
padding: 0; }
ul li {
list-style-type: none; }
.row {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px; }
.row:after {
content: "";
display: table;
clear: both; }
.row .col {
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row .col.l1 {
width: 8.33333%;
margin-left: 0; }
.row .col.l2 {
width: 16.66667%;
margin-left: 0; }
.row .col.l3 {
width: 25%;
margin-left: 0; }
.row .col.l4 {
width: 33.33333%;
margin-left: 0; }
.row .col.l5 {
width: 41.66667%;
margin-left: 0; }
.row .col.l6 {
width: 50%;
margin-left: 0; }
.row .col.l7 {
width: 58.33333%;
margin-left: 0; }
.row .col.l8 {
width: 66.66667%;
margin-left: 0; }
.row .col.l9 {
width: 75%;
margin-left: 0; }
.row .col.l10 {
width: 83.33333%;
margin-left: 0; }
.row .col.l11 {
width: 91.66667%;
margin-left: 0; }
.row .col.l12 {
width: 100%;
margin-left: 0; }
/*----------------------- CUSTOM CSS BIDY AND CONTENT ------------------------------*/
body,.body-fauxcolumn-outer {
color:$(body.text.color);
background:$(body.background.color);
font-family: 'open sans', sans-serif;
}
body p {
padding-bottom:20px;
line-height:2em;
}
#container {
margin-left:auto;
margin-right:auto;
margin:0 auto;
color:#444;
font-size:14px;
font-weight:normal;
}
#content {
width:712px;
padding:20px 0px 10px 0px;
float:left;
display:inline;
margin-top:-10px;
}
#content-wide {
clear:both;
width:1060px;
padding:10px 0px;
}
#aside {
display:inline;
float:right;
width:336px;
color:#ccc;
padding:10px 0px;
}
#footer {
clear:both;
:hidden;
background:$(credit.bg.color);
font-size:12px;
}
.radius {
-webkit-border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.container-box{
background:$(content.background.color);
}
#main-header-wrapper {
padding-bottom:10px;
background:$(header.background.color);
}
#header-wrapper {
min-height:100px;
margin-bottom:0px;
}
.head-col {
padding:20px 0;
}
.header-advertisement {
padding:30px 0;
}
.header-ad {
float:right
}
#header {
margin-top:-15px;
}
#header h1 {
color:#666666;
text-shadow:2px 2px 2px #FFFFFF;
letter-spacing:-2px;
}
#header a {
text-decoration:none;
color:#666666;
}
#header a:hover {
text-decoration:none;
color:#666666;
}
#header .description {
margin:-3px 5px 5px;
line-height:1.4em;
color:#888888;
font-size:14px;
}
.header {
margin:35px 0;
}
.h-title {
font-size:36px;
line-height:40px;
margin:10px 0;
font-family:inherit;
font-weight:bold;
line-height:1;
color:$(blog.title.color);
font-family: 'Raleway',sans-serif;
}
.h-title a {
color:$(blog.title.color);
}
.Header .description {
margin:.5em 0 10px;
padding:0 2px;
color:$(blog.description.color);
}
.date-header {
display:none;
}
.home-main-content {
padding: 0px !important;
}
<!-- Start Main navbar -->
<div class='container'>
<nav class='teal lighten-1'>
<div class='nav-wrapper'>
<a class='waves-effect waves-light brand-logo logo-main'><i class='medium mdi-action-home'/></a>
<ul class='right side-nav' id='slide-out'>
<li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/i-am-ambitious-and-avid-blogger-with.html'>About Us</a></li>
<li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/contact-us.html'>Contact Us</a></li>
<li class='no-padding'>
<ul class='collapsible collapsible-accordion'>
<li>
<a class='waves-effect waves-light collapsible-header'>Dropdown<i class='mdi-navigation-arrow-drop-down'/></a>
<div class='collapsible-body'>
<ul>
<li><a href='https://bestbloggingforyou.blogspot.com/p/terms-of-service.html'>Privacy Policy</a></li>
<li><a href='https://bestbloggingforyou.blogspot.com/p/blog-page.html'>Earn 5 Bucks Per Day</a></li>
<li><a href='https://www.bestblogging.co.uk/p/blog-page_13.html'>Guest Blog</a></li>
<li><a href='#!'>Coming Soon..</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<ul class='right hide-on-med-and-down'>
<li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/i-am-ambitious-and-avid-blogger-with.html'>About Us</a></li>
<li><a class='waves-effect waves-light' href='https://bestbloggingforyou.blogspot.com/p/contact-us.html'>Contact Us</a></li>
<li><a class='waves-effect waves-light dropdown-button' data-activates='dropdown1'>Dropdown<i class='mdi-navigation-arrow-drop-down right'/></a></li>
<ul class='dropdown-content' id='dropdown1'>
<li><a href='https://bestbloggingforyou.blogspot.com/p/terms-of-service.html'>Privacy Policy</a></li>
<li><a href='https://bestbloggingforyou.blogspot.com/p/blog-page.html'>Earn 5 Bucks Per Day</a></li>
<li><a href='https://www.bestblogging.co.uk/p/blog-page_13.html'>Guest Blog</a></li>
<li><a href='#!'>Coming Soon..</a></li>
</ul>
</ul>
<a class='button-collapse' data-activates='slide-out'><i class='mdi-navigation-menu'/></a>
</div>
</nav>
</div>
<!-- End Main navbar -->