Does this code have any issue?

The dropdown menu is not responding neither the home button!

	<!-- 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 -->

Is this complete?

1 Like

yes, it is the complete navigation bar html code. however, if you need css code here it is,

/*
simple hack better layout
*/
body#layout{width:100%;float:left;padding-top: 70px;}
body#layout div.widget{position:;}
body#layout div.section{position:initial;overflow:visible;}
/*
simple hack better layout
*/
/*
simple hack new template version
*/
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; }
/*
simple hack new template version
*/
/* Variable definitions
====================
<Group description="Page Text" selector="body">
<Variable name="body.text.color" description="Text Color" type="color" default="#666666" value="#232323"/>
</Group>
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#fff" value="#ffffff"/>
<Variable name="header.background.color" description="Header Background" type="color" default="#fff" value="#ffffff"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#fff" value="#ffffff"/>
<Variable name="sidebar.background.color" description="Sidebar Background" type="color" default="#fff" value="#ffffff"/>
</Group>
<Group description="Links" selector=".main-body">
<Variable name="link.color" description="Link Color" type="color" default="#464646" value="#464646"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#F0636D" value="#1abc9c"/>
</Group>
<Group description="Blog Title and Description" selector=".titlewrapper">
<Variable name="blog.title.color" description="Link Color" type="color" default="#222" value="#9c1abc"/>
<Variable name="blog.description.color" description="Hover Color" type="color" default="#323a45" value="#000000"/>
</Group>
<Group description="Post Header" selector=".post-home-title">
<Variable name="post.home.title.color" description="Home page Post title color" type="color" default="#282b2d" value="#9c1abc"/>
<Variable name="post.home.titlehover.color" description="Home page Post title hover color" type="color" default="#F0636D" value="#f01c2b"/>
<Variable name="post.post.title.color" description="Post page Post title hover color" type="color" default="#333" value="#333333"/>
</Group>
<Group description="Content color" selector=".article-container">
<Variable name="content.color" description="Content text color" type="color" default="#666" value="#333333"/>
</Group>
<Group description="Sidebar Widgets" selector=".sidebar">
<Variable name="sidebar.title.color" description="Sidebar title color" type="color" default="#222" value="#232323"/>
<Variable name="sidebar.text.color" description="Sidebar text color" type="color" default="#808080" value="#ffffff"/>
<Variable name="sidebar.link.color" description="Sidebar link color" type="color" default="#333" value="#464646"/>
<Variable name="sidebar.linkhover.color" description="Sidebar link hover color" type="color" default="#222" value="#f0636d"/>
<Variable name="sidebar.border.color" description="Sidebar title border color" type="color" default="#ddd" value="#dddddd"/>
</Group>
<Group description="Navigation" selector=".blogger-pager">
<Variable name="pagination.link.color" description="Pagination link color" type="color" default="#fff" value="#ffffff"/>
<Variable name="pagination.bg.color" description="Pagination background color" type="color" default="#F0636D" value="#F0636D"/>
<Variable name="pagination.current.link.color" description="Pagination current page color" type="color" default="#fff" value="#ffffff"/>
<Variable name="pagination.current.bg.color" description="Pagination current page background color" type="color" default="#1abc9c" value="#1abc9c"/>
</Group>
<Group description="Footer credits" selector=".footer-link">
<Variable name="credit.text.color" description="Credit text color" type="color" default="#eee" value="#eeeeee"/>
<Variable name="credit.bg.color" description="Credit background color" type="color" default="#191d20" value="#191d20"/>
<Variable name="credit.link.color" description="Credit link color" type="color" default="#ccc" value="#cccccc"/>
</Group>
*/

/*----------------------- 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;
}
#main {
padding-top:5px;
background:$(content.background.color);
}
.article-container{
background:$(content.background.color);
}
#content-top .widget{
margin-bottom:20px;
}
.post {
color:$(content.color);
line-height:2em;
margin-bottom:10px;
position:initial;
}
.main-post-body img{
max-width: 100%;
height: auto;
}
.post-outer {
margin-bottom:10px;
}
.post-title {
color:$(post.post.title.color);
padding: 0;
margin: 0;
font-size: 31px;
}
.post .post-text {
padding-bottom:5px;
clear:both;
}
.post h2.post-title {
font-weight:bold;
letter-spacing:-1px;
margin-top:0px;
}
.post h2 a {
color:#353737;
letter-spacing:-1px;
}
.post h2 a:hover {
color:#666;
text-decoration:none;
}
.post ul.post-meta {
color:#6b6969;
clear:both;
border-top:1px solid #222020;
border-bottom:1px solid #222020;
overflow:visible;
font-size:12px;
font-style:italic;
padding:5px 0px;
list-style:none;
}
.post ul.post-meta li {
padding-right:20px;
float:left;
}
.post ul.post-meta a {
color:#0b6e69;
}
.post .post-comment {
display:inline;
background:url('http://1.bp.blogspot.com/_MkGBVwDEF84/TGedevmtX_I/AAAAAAAAEZY/I5fmryAKyP8/s1600/post_comment.jpg') no-repeat center;
width:33px;
text-align:center;
padding:5px 0px 10px 0px;
margin-top:10px;
float:right;
}
.post h2,.post h3 {
padding:10px 0px;
font-weight:normal;
color:#666;
}
.post h4,.post h5,.post h6 {
padding:10px 0px;
font-size:14px;
font-weight:normal;
color:#666;
}
.post blockquote {
display:block;
margin:20px;
padding:0px 30px;
background:#ddd;
font-style:italic;
color:#999;
}
.left {
padding:20px 25px 0px 0px;
width:300px;
float:right;
}
.status-msg-body {
position: relative !important;
border: 2px solid #ddd;
padding: 10px;
}
.CSS_LIGHTBOX {
z-index:9999 !important;

The dropdowns are wrapped in an anchor with no href attribute, they won’t do anything without that.
Also note that the i element in HTML is not self closing.
There are a few code errors, try validating your code.
https://validator.w3.org/nu/

1 Like

Thanks for the solution but i cant fix those as i’m not very much familiar with code developing. However, Im providing more detailed html and css code for your convenience

/*
simple hack better layout
*/
body#layout{width:100%;float:left;padding-top: 70px;}
body#layout div.widget{position:;}
body#layout div.section{position:initial;overflow:visible;}
/*
simple hack better layout
*/
/*
simple hack new template version
*/
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; }
/*
simple hack new template version
*/
/* Variable definitions
====================
<Group description="Page Text" selector="body">
<Variable name="body.text.color" description="Text Color" type="color" default="#666666" value="#232323"/>
</Group>
<Group description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable name="body.background.color" description="Outer Background" type="color" default="#fff" value="#ffffff"/>
<Variable name="header.background.color" description="Header Background" type="color" default="#fff" value="#ffffff"/>
<Variable name="content.background.color" description="Main Background" type="color" default="#fff" value="#ffffff"/>
<Variable name="sidebar.background.color" description="Sidebar Background" type="color" default="#fff" value="#ffffff"/>
</Group>
<Group description="Links" selector=".main-body">
<Variable name="link.color" description="Link Color" type="color" default="#464646" value="#464646"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#F0636D" value="#1abc9c"/>
</Group>
<Group description="Blog Title and Description" selector=".titlewrapper">
<Variable name="blog.title.color" description="Link Color" type="color" default="#222" value="#9c1abc"/>
<Variable name="blog.description.color" description="Hover Color" type="color" default="#323a45" value="#000000"/>
</Group>
<Group description="Post Header" selector=".post-home-title">
<Variable name="post.home.title.color" description="Home page Post title color" type="color" default="#282b2d" value="#9c1abc"/>
<Variable name="post.home.titlehover.color" description="Home page Post title hover color" type="color" default="#F0636D" value="#f01c2b"/>
<Variable name="post.post.title.color" description="Post page Post title hover color" type="color" default="#333" value="#333333"/>
</Group>
<Group description="Content color" selector=".article-container">
<Variable name="content.color" description="Content text color" type="color" default="#666" value="#333333"/>
</Group>
<Group description="Sidebar Widgets" selector=".sidebar">
<Variable name="sidebar.title.color" description="Sidebar title color" type="color" default="#222" value="#232323"/>
<Variable name="sidebar.text.color" description="Sidebar text color" type="color" default="#808080" value="#ffffff"/>
<Variable name="sidebar.link.color" description="Sidebar link color" type="color" default="#333" value="#464646"/>
<Variable name="sidebar.linkhover.color" description="Sidebar link hover color" type="color" default="#222" value="#f0636d"/>
<Variable name="sidebar.border.color" description="Sidebar title border color" type="color" default="#ddd" value="#dddddd"/>
</Group>
<Group description="Navigation" selector=".blogger-pager">
<Variable name="pagination.link.color" description="Pagination link color" type="color" default="#fff" value="#ffffff"/>
<Variable name="pagination.bg.color" description="Pagination background color" type="color" default="#F0636D" value="#F0636D"/>
<Variable name="pagination.current.link.color" description="Pagination current page color" type="color" default="#fff" value="#ffffff"/>
<Variable name="pagination.current.bg.color" description="Pagination current page background color" type="color" default="#1abc9c" value="#1abc9c"/>
</Group>
<Group description="Footer credits" selector=".footer-link">
<Variable name="credit.text.color" description="Credit text color" type="color" default="#eee" value="#eeeeee"/>
<Variable name="credit.bg.color" description="Credit background color" type="color" default="#191d20" value="#191d20"/>
<Variable name="credit.link.color" description="Credit link color" type="color" default="#ccc" value="#cccccc"/>
</Group>
*/

/*----------------------- 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;
}
#main {
padding-top:5px;
background:$(content.background.color);
}
.article-container{
background:$(content.background.color);
}
#content-top .widget{
margin-bottom:20px;
}
.post {
color:$(content.color);
line-height:2em;
margin-bottom:10px;
position:initial;
}
.main-post-body img{
max-width: 100%;
height: auto;
}
.post-outer {
margin-bottom:10px;
}
.post-title {
color:$(post.post.title.color);
padding: 0;
margin: 0;
font-size: 31px;
}
.post .post-text {
padding-bottom:5px;
clear:both;
}
.post h2.post-title {
font-weight:bold;
letter-spacing:-1px;
margin-top:0px;
}
.post h2 a {
color:#353737;
letter-spacing:-1px;
}
.post h2 a:hover {
color:#666;
text-decoration:none;
}
.post ul.post-meta {
color:#6b6969;
clear:both;
border-top:1px solid #222020;
border-bottom:1px solid #222020;
overflow:visible;
font-size:12px;
font-style:italic;
padding:5px 0px;
list-style:none;
}
.post ul.post-meta li {
padding-right:20px;
float:left;
}
.post ul.post-meta a {
color:#0b6e69;

box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:176px;
color:#666;
}.sbutton{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:4px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px; margin-left:8px;
font:12px sans-serif;
}
.sbutton:hover{
background:#336699;
}
]]></b:skin>
<link href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css' media='screen,projection' rel='stylesheet' type='text/css'/>
<link href='///maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<b:template-skin>
<b:variable default='1150px' name='content.width' type='length' value='1150px'/>
<![CDATA[
/*----------------------- MISC ------------------------------*/
.container{
	padding:0 !important;
	width:100%;
}
.logo-main{
	padding:0 20px !important;
}
.row-margin-less{
	margin-bottom:0px !important;
}
span.badge{
	position:inherit !important;
	font-weight: 300;
  	font-size: 0.8rem;
  	color: #fff;
  	background-color: #26a69a;
  	border-radius: 2px;
}
abbr[title] {
  border-bottom: none;
}
.img-post-span{
	float:left;
	margin-right:15px;
}
.post-single-outer{
	margin:-15px;
}
.col-padding-0{
	padding:0px !important;
}
.post-header{
	font-size:12px !important;
}
@media only screen and (min-width: 601px) {
.container {
  width: 95%;
}
}
@media only screen and (min-width: 993px) {
.container {
  width: 90%;
}
}
@media (min-width: 1200px) {
.container {
width: $(content.width);
}
}
]]>
</b:template-skin>
	<script src='https://code.jquery.com/jquery-2.1.1.min.js' type='text/javascript'/>
    <script type='text/javascript'>
      //]]>
    </script>
  </head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
<script async='async' src='https://www.googletagmanager.com/gtag/js?id=UA-29490290-2'/>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag(&#39;js&#39;, new Date());

  gtag(&#39;config&#39;, &#39;UA-29490290-2&#39;);
</script>
  <body class='main-body'>
	<!-- 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' href='#!'>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' href='#!'>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' href='#!'><i class='mdi-navigation-menu'/></a>
		</div>
      </nav> 
	</div>

	<!-- End Main navbar -->
    <div class='container container-box'>
	
      <div class='clearfix'/>
      <header id='main-header-wrapper'>
        <div class='container-slash'>
          <div class='row' id='header-wrapper'>
            <div class='col s12 m6 l4 head-col'>
              <b:section class='' id='blog-title' maxwidgets='1' showaddelement='yes' title='My Favorite Things'>
                <b:widget id='Header1' locked='true' title='Best Blogging Experience (Header)' type='Header' version='1'>
                  <b:widget-settings>
                    <b:widget-setting name='displayUrl'>http://4.bp.blogspot.com/-wCWz6q30iKI/Xa2mMDqszJI/AAAAAAAAA40/5BrJ4MgDzBIkBW6N3iGc9MJucgJpaq_bQCK4BGAYYCw/s1600/Blogging.png</b:widget-setting>
                    <b:widget-setting name='displayHeight'>31</b:widget-setting>
                    <b:widget-setting name='sectionWidth'>338</b:widget-setting>
                    <b:widget-setting name='useImage'>true</b:widget-setting>
                    <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
                    <b:widget-setting name='imagePlacement'>BEFORE_DESCRIPTION</b:widget-setting>
                    <b:widget-setting name='displayWidth'>600</b:widget-setting>
                  </b:widget-settings>
                  <b:includable id='main'>
                    <b:if cond='data:useImage'>
                      <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
                        <!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
                        <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height + &quot;px;&quot;                      + &quot;_height: &quot; + data:height + &quot;px;&quot;                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
                          <div class='titlewrapper' style='background: transparent'>
                            <h1 class='title' style='background: transparent; border-width: 0px'>
                              <b:include name='title'/>
                            </h1>
                          </div>
                          <b:include name='description'/>
                        </div>
                        <b:else/>
                        <!--Show the image only-->
                        <div id='header-inner'>
                          <a expr:href='data:blog.homepageUrl' style='display: block'>
                            <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
                          </a>
                          <!--Show the description-->
                          <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
                            <b:include name='description'/>
                          </b:if>
                        </div>
                      </b:if>
                      <b:else/>
                 

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.