Template issue with responsive menu - Bullet list Styles Overridden


#1

Hi , I have a test blog which is www.test-ntsotsos.blogspot.com. I put a responsive menu but there is something wrong .I am 100% sure that popular post widget creates some kind of trouble in template and responsive menu does not showing well .I tried to fix it but I can’t find anything…wrong. Can somebody help me to fix it? The template worked fine without menu!!!


#2

Nick your blog is not set to public. Kindly adjust the settings first. Scripts work on blogger only when the blog is allowed in public mode. Right now only invited readers can see it. Try this and let me know if it works


#3

Hello @Nick You’r Blog Is Not Public Kindly Change It Under Settings. :smile:


#4

I am sorry ,I fixed it now public ! Please see the green block at the center of the screen .Very strange!

I hope you find me a solution !


#5

Hello Nick Sir! Try This. go to your blogger html editor there search for your sidebar popular widget and under there you will find this

<div class="widget-content popular-posts"> 

Under that there will be <ul>...</ul> or this code

<ul>
<li>
<div class="item-content">
<div class="item-title"><a href="http://www.test-ntsotsos.blogspot.in/2015/04/hghghfghgfh.html">hghghfghgfh</a></div>
<div class="item-snippet">nnf</div>
</div>
<div style="clear: both;"></div>
</li>
<li>
<div class="item-content">
<div class="item-title"><a href="http://www.test-ntsotsos.blogspot.in/2015/04/gfdgfdgdfgdggd.html">gfdgfdgdfgdggd</a></div>
<div class="item-snippet">g</div>
</div>
<div style="clear: both;"></div>
</li>
</ul>

Delete it whole and now the green bar will be removed try it and see if you encounter any more problems please ask us

~ Thanx || Nafees Khan


#6

That is quite easy to solve you have used a naked CSS property for bullet list menu which is overriding all styles on your blog. Do this:

Find this code inside your template

 ul {
margin:0 auto;left:0;
padding:0;
height:50px;width:100%;
background:rgba(57,130,62, 0.7);
position:fixed; z-index:99999;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}

Now replace it with this

#menu {
margin:0 auto;left:0;
padding:0;
height:50px;width:100%;
background:rgba(57,130,62, 0.7);
position:fixed; z-index:99999;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}

Save your template and all fixed! :innocent:


#7

@Mohammad Unfortunatly this fix is working but the menu is not showing well .Now has hover issues.Please help me .


#8

@Nafees Popular Post content disappear when I use your fix .Anything else please?


#9

What kind of hover problem you are having with @Mohammad bro’s fix?


#10

when I try to hover and see dropped list ,the list is not in right place.If I try to change values for css nothing happens.