Sticky Menu Bar w/Logo

[Phear]

No effect on that, either. Strange...

[Lynx]

Sorry. I was hoping one of them might work.

[Phear]

Aug 10, 2015 11:32:40 GMT -8 Lynx said:

Sorry. I was hoping one of them might work.

Don't be sorry! All the assistance is much appreciated!

[Tumbleweed]

Phear,

We'll figure this out somehow. First, you never said if you see the same thing on my test site:  putteraround2.proboards.com/  That would help maybe figuring it out.

Also the code MSG offered is a good solution at least until we can work out the real reason but it is actually "background-size " not "background-image". So you can try this and try contain in there too if cover doesn't work:

#banner {
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}

Also the banner is actually in h2 tags so maybe some css messing with that somewhere?

<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>

I'm not even sure any of that will affect it since the image is struck out in the # banner id and the plugin (I assume?) puts it in inline styling on your site.

inline style{
background-image: url(http://storage.proboards.com/6300968/i/nE72aA5tq468HF4hQ7ii.png);
}
/*media screen*/
#banner {
display: table-cell;
height: 150px;
background-color: #000000;
background-image: url('http://storage.proboards.com/6300968/i/I_FEwdmoOrCvz8vlRuKu.jpg');
background-position: left center;
background-repeat: no-repeat;
vertical-align: middle;
padding: 0px 20px;
text-align: left;
overflow: hidden;
}

That's the only difference I see so far. I'm still looking. If only I could replicate what you get, we could solve it.

[Phear]

Aug 10, 2015 17:08:04 GMT -8 Tumbleweed said:

Phear,

We'll figure this out somehow. First, you never said if you see the same thing on my test site:  putteraround2.proboards.com/  That would help maybe figuring it out.

Also the code MSG offered is a good solution at least until we can work out the real reason but it is actually "background-size " not "background-image". So you can try this and try contain in there too if cover doesn't work:

#banner {
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}

Also the banner is actually in h2 tags so maybe some css messing with that somewhere?

<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>

I'm not even sure any of that will affect it since the image is struck out in the # banner id and the plugin (I assume?) puts it in inline styling on your site.

inline style{
background-image: url(http://storage.proboards.com/6300968/i/nE72aA5tq468HF4hQ7ii.png);
}
/*media screen*/
#banner {
display: table-cell;
height: 150px;
background-color: #000000;
background-image: url('http://storage.proboards.com/6300968/i/I_FEwdmoOrCvz8vlRuKu.jpg');
background-position: left center;
background-repeat: no-repeat;
vertical-align: middle;
padding: 0px 20px;
text-align: left;
overflow: hidden;
}

That's the only difference I see so far. I'm still looking. If only I could replicate what you get, we could solve it.

I checked your test board, and the issue wasn't replicated. I'm guessing it's my Random Banner plugin that's causing the frustrations, mixed with the new navigation. Maybe the inline-styling itself is the problem?

I tried the updated codes for MSG and it still had no effect on anything. It has to be the plugin.

[Tumbleweed]

Aug 11, 2015 7:37:40 GMT -8 Phear said:

Aug 10, 2015 17:08:04 GMT -8 Tumbleweed said:

Phear,

We'll figure this out somehow. First, you never said if you see the same thing on my test site:  putteraround2.proboards.com/  That would help maybe figuring it out.

Also the code MSG offered is a good solution at least until we can work out the real reason but it is actually "background-size " not "background-image". So you can try this and try contain in there too if cover doesn't work:

#banner {
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}

Also the banner is actually in h2 tags so maybe some css messing with that somewhere?

<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>

I'm not even sure any of that will affect it since the image is struck out in the # banner id and the plugin (I assume?) puts it in inline styling on your site.

inline style{
background-image: url(http://storage.proboards.com/6300968/i/nE72aA5tq468HF4hQ7ii.png);
}
/*media screen*/
#banner {
display: table-cell;
height: 150px;
background-color: #000000;
background-image: url('http://storage.proboards.com/6300968/i/I_FEwdmoOrCvz8vlRuKu.jpg');
background-position: left center;
background-repeat: no-repeat;
vertical-align: middle;
padding: 0px 20px;
text-align: left;
overflow: hidden;
}

That's the only difference I see so far. I'm still looking. If only I could replicate what you get, we could solve it.

I checked your test board, and the issue wasn't replicated. I'm guessing it's my Random Banner plugin that's causing the frustrations, mixed with the new navigation. Maybe the inline-styling itself is the problem?

I tried the updated codes for MSG and it still had no effect on anything. It has to be the plugin.

Last thought, in your visual editor where you add your banner how about setting it to right center rather than left center. I can't think of anything else it might be or what to do to fix it but that doesn't mean my brain isn't churning things over in my sub-conscious. I'll have random ideas come to me even though I wasn't even thinking about it or didn't think I was. lol

You could ask the creator of that random plugin if he has any ideas.

[Phear]

Aug 11, 2015 8:50:38 GMT -8 Tumbleweed said:

Aug 11, 2015 7:37:40 GMT -8 Phear said:

I checked your test board, and the issue wasn't replicated. I'm guessing it's my Random Banner plugin that's causing the frustrations, mixed with the new navigation. Maybe the inline-styling itself is the problem?

I tried the updated codes for MSG and it still had no effect on anything. It has to be the plugin.

Last thought, in your visual editor where you add your banner how about setting it to right center rather than left center. I can't think of anything else it might be or what to do to fix it but that doesn't mean my brain isn't churning things over in my sub-conscious. I'll have random ideas come to me even though I wasn't even thinking about it or didn't think I was. lol

You could ask the creator of that random plugin if he has any ideas.

No good on the Visual Editor alignment, either. The space isn't affected by any banner changes, but by navigation changes. I think it's being brought in by the navigation itself, somehow?

I'll try to find the thread for the random banner and chime in.

[Tumbleweed]

Aug 11, 2015 9:29:46 GMT -8 Phear said:

Aug 11, 2015 8:50:38 GMT -8 Tumbleweed said:

Last thought, in your visual editor where you add your banner how about setting it to right center rather than left center. I can't think of anything else it might be or what to do to fix it but that doesn't mean my brain isn't churning things over in my sub-conscious. I'll have random ideas come to me even though I wasn't even thinking about it or didn't think I was. lol

You could ask the creator of that random plugin if he has any ideas.

No good on the Visual Editor alignment, either. The space isn't affected by any banner changes, but by navigation changes. I think it's being brought in by the navigation itself, somehow?

I'll try to find the thread for the random banner and chime in.

Is it this random banner code?

support.proboards.com/thread/433496/plugin-random-banner?page=2

I stuck it on that test site and it made no difference. I put that 94.7% in for the #navigation-menu and look what it did to m site.

putteraround2.proboards.com/

 So we must have something different. But no matter what I do, I'm not getting a slight scroll bar at the bottom like your site and that bit of background showing. If you want, you can pm me or post your wrapper template and I can test it out just to rule that out.

[Phear]

Aug 12, 2015 2:39:32 GMT -8 Tumbleweed said:

Aug 11, 2015 9:29:46 GMT -8 Phear said:

No good on the Visual Editor alignment, either. The space isn't affected by any banner changes, but by navigation changes. I think it's being brought in by the navigation itself, somehow?

I'll try to find the thread for the random banner and chime in.

Is it this random banner code?

support.proboards.com/thread/433496/plugin-random-banner?page=2

I stuck it on that test site and it made no difference. I put that 94.7% in for the #navigation-menu and look what it did to m site.

putteraround2.proboards.com/

 So we must have something different. But no matter what I do, I'm not getting a slight scroll bar at the bottom like your site and that bit of background showing. If you want, you can pm me or post your wrapper template and I can test it out just to rule that out.

Yeah, that's the Random Banner plugin. How strange. There must be something else reacting to the new navigation width, then. So weird. I'll PM you my Wrapper Template, and we can see what we can do.

[Tumbleweed]

Aug 12, 2015 7:45:52 GMT -8 Phear said:

Aug 12, 2015 2:39:32 GMT -8 Tumbleweed said:

Is it this random banner code?

support.proboards.com/thread/433496/plugin-random-banner?page=2

I stuck it on that test site and it made no difference. I put that 94.7% in for the #navigation-menu and look what it did to m site.

putteraround2.proboards.com/

 So we must have something different. But no matter what I do, I'm not getting a slight scroll bar at the bottom like your site and that bit of background showing. If you want, you can pm me or post your wrapper template and I can test it out just to rule that out.

Yeah, that's the Random Banner plugin. How strange. There must be something else reacting to the new navigation width, then. So weird. I'll PM you my Wrapper Template, and we can see what we can do.

Thanks for the template and we can rule that out. I have it on my site now and also set the #navigation-menu width back to 100% and no issues at all. Even have the random banner code running. putteraround2.proboards.com/

So that leave changes in your visual editor/style sheet, anything in your headers/footer or other plugins.  You can either try disabling your plugins one by one checking to see if any of them fix it or you can do the same with your style sheet and shoot a pm copy to me and I'll throw that on too.

[sparks80]

thebriarpatchforum.com

Tumbleweed , I'm using your code for the sticky menu with logo fade on my site. I have recently added the Drop Down Nav plugin and I'm finding some styling issues with the menu. Not 100% sure if it's because of the Drop Down plugin, or the alteration of the code for the Sticky Menu.

I'm getting some odd formatting on the dropdown menu when I'm scrolled down to the point of the sticky going into effect.



As you can see, the border is stretched past the fill.

Was hoping you could maybe take a look and let me know. If it's a result of the drop down code being off, I can reach out to the creator of that.

Thanks for the help.

[Tumbleweed]

sparks80 ,

I tossed that plugin on the test site I used throughout this thread (you can find it in previous posts) and I'm not getting that so will need to play around a bit to see if I can replicate what you are getting but my test site  is loading REALLY slooooooooow so I'm going to go grab a late lunch and come back to it later and hopefully it will be loading faster. I'll try to help you figure it out.

Edit: I'm back but my site is still loading slow. Grrr.  For some reason with this plug in I'm not able to style the colors in the setting and I'm pretty sure that is where the white of your background color comes in to play on your site. I might have something over-riding it but until I can replicate what you have, it will be difficult to fix so stay tuned while I fiddle with this. 

Edit again. I can't find anything that would be preventing the plugin from adding the colors I designate so can you try adding this to the bottom of your style sheet and let me know if there are any changes:


ul.sub-menu-ul li {background-color: #ffffff;padding:0px; line-height:28px;
}

[sparks80]

FYI, Tumbleweed , I added some custom styling to the plugin. That might have an impact, unless you were able to see it in the source.

Let me know if you need me to provide it.

Figured I would save back and forth time and just post it.


Extra List Item CSS: font: .9em "Trebuchet MS", Verdana, Arial; text-shadow: none;
Extra List Item Hover CSS: font: .9em "Trebuchet MS", Verdana, Arial; text-shadow: none;
Extra Menu CSS: border: 1px solid #696969; box-shadow: 0px 1px .5px 0px #696969;
Extra Menu Hover CSS: border: 1px solid #696969; box-shadow: 0px 1px .5px 0px #696969;

I essentially wanted it to replicate the look of the nav tree.

[Tumbleweed]

Feb 24, 2016 17:57:46 GMT -8 sparks80 said:

FYI, Tumbleweed , I added some custom styling to the plugin. That might have an impact, unless you were able to see it in the source.

Let me know if you need me to provide it.

Figured I would save back and forth time and just post it.


Extra List Item CSS: font: .9em "Trebuchet MS", Verdana, Arial; text-shadow: none;
Extra List Item Hover CSS: font: .9em "Trebuchet MS", Verdana, Arial; text-shadow: none;
Extra Menu CSS: border: 1px solid #696969; box-shadow: 0px 1px .5px 0px #696969;
Extra Menu Hover CSS: border: 1px solid #696969; box-shadow: 0px 1px .5px 0px #696969;

I essentially wanted it to replicate the look of the nav tree.

Thanks for that but it doesn't appear any of that would cause that but just to be sure, I went ahead and added it to mine and everything looks fine.  I'm just not sure what would be causing that as I viewed your css via your inspect elements and I see nothing unusual.  Did you try the css I gave you just so we can see if it has any effect on that at all?


Just wanted to add, and not sure that I can explain it right but when I click to inspect the element it highlights that full extra area that we are seeing and it seems to be the class  ul.sub-menu-ul  and the height when highlighted is 53px but nothing in the css I can actually see as inline styling or in your style sheet that makes it 53px. I'll keep thinking and digging. Let me know if anything changes for the better or worse if you add that css I gave you to the bottom of your style sheet. 

[sparks80]

Tumbleweed , I added the CSS you gave me and it at least changed the visual look of the dropdown, eliminating the unfilled section. The general container is still larger than it should be though.

Step in the right direction though.