[vB4] Insert image under NAV BAR

[iusevb]

I researched and found some helpful things but none of them really helped me out. So the question is, how can I insert an image under the NAV BAR? Im using VB 4.1.9.

Any help would be great!

Thanks!

[Wayne Luke]

Using HTML you would do one of the following:

1) Place the Image in an Advertising Location using the Manage Ads tool in the AdminCP.

2) Place the Image in a Notice using the Notices Manager in the AdminCP.

3) Edit the navbar template directly and insert your Image.

[iusevb]

Thanks for the reply. If I wanted to edit the nav bar template directly, what steps would I need to do?

Thanks again for the help!

[Wayne Luke]

Styles & Templates -> Style Manager.

Style Manager: https://www.vbulletin.com/docs/html/stylemanager
Edit Template: https://www.vbulletin.com/docs/html/...r_add_template

[iusevb]

While in the edit template, where should I put the HTML code for the image?

[Wayne Luke]

If you want it directly under the navbar, then put it above the breadcrumb.

If you want it under the breadcrumb, put it under.

Really depends on your needs. The code should be adequate enough to read the different locations. The Navbar template has the navbar, breadcrumb and notices in it.

[iusevb]

I figured out how to insert an image . Is there a way so that when the window screen moves the image moves with the window screen?

[Wayne Luke]

I don't understand the question. Images should scroll with screen scrolling automatically.

[iusevb]

As I click on the bottom right hand side of the screen to stretch out the window, the image stays in place while everything else stretches and moves with the window. Thus making the image look out of place. Is there a way to have the image below the nav tab move automatically with size of the window? I guess is there a way to have the image also be a wrapper? If that makes sense.

Thanks for the help

[Wayne Luke]

Really don't understand what you're saying. Do you have a link that shows this problem in action?

[iusevb]

The link is www.benzeffect.com. While the rest of the forum is moving, the image below the nav bar stays stationary. As the window size increases, the white background toward the right of the image increase as the left side does not. Also, when the window size decreases, the image over hangs the border, looking out of place.

Sorry if my explanation isn't very understandable.

[Wayne Luke]

That is standard behavior. Might think about centering the image with HTML and it will stay in the center. Unlike smartphone browsers which resize images when you zoom in and out, images don't change size on the desktop automatically.

[iusevb]

How can I do that with HTML? I'm not sure what code to use in my HTML code for my image.

[Wayne Luke]

<div style="text-align:center><img src="pathtoimage.png"></div>

Or you can do something like this:

CSS -

.myawesomeimg {
width: 900px;
margin-left: auto;
margin-right: auto;
display: block;
border: 0px;
}

HTML -
<img class="myawesomeimg" src="pathtoimage.png" />


For more on learning HTML and CSS please visit http://www.w3schools.com.

[iusevb]

This is the code i put into the nav bar: <a href="http://benzeffect.com" target="new">="text-align:center><img src="http://benzeffect.com/forum/images/misc/SLS banner.jpg"alt="Image Down" title="Benz Effect"></a>

The image is centered but I get the text ="text-align:center> by the image under the nav bar. Im not to sure why this is happening.