Help Needed

[rosco]

Hi all,

I’m developing a site using Twitter Bootstrap and I have a couple of fairly basic issues that I need your help with.

The site can be found here the first issue that I am having is that the div containing the navbar is overlapping the featured area. You may not be able to see it at first, but if you inspect the element you can see this clearly. What is causing this, and how to I remove it so that the contents below the navbar are completely separate?

My second question is that I would like to move the logo above the black and white navbar, like you see on Youtube. However when I try to add new content before the navbar it always appears after. Why is this?

Can anyone tell me what I need to do to ensure the logo appears above the navbar?

Thanks,

Ross

[rosco]

I just tried changing it to absolute in the following piece of code

.navbar-fixed-top {

position: fixed;

top: 0;

right: 0;

left: 0;

z-index: 1030;

}

However this didn’t work. Do I need to change it somewhere else?

Also I tried adding the logo above the navbar using the following code.

	


CAMOT

This made the logo appear below the navbar.

Any thoughts?

Ross

[rosco]

Thanks Karl, I assume you meant

position: absolute!important;

Anyway, that didn’t work either. As I’m using Bootstrap there is a lot of code in the stylesheet so I’m wondering if I need to amend this elsewhere

[Senff]

Not really sure what you’re trying to do. Should the navbar ALWAYS be at the top of the screen, sticky, overlapping the content once you scroll down? Cause that’s what it’s doing now, and it’s because it has the class “navbar-fixed-top”.

Or do you want it to scroll with the rest of the content?

Regardless, if you want the logo to be ABOVE the navbar (instead of IN the navbar), the easiest way is probably to give the navbar a top margin (or top position), and the logo a negative top margin. But then you’re going to have to fix a few other cosmetic issues.

[rosco]

Hi Senff, thanks for your input. I can now see what’s happening with the navbar being sticky. I hadn’t noticed this before.

The reason I am wanting the logo above the navbar is because my client doesn’t want the black/white branding that the navbar brings. They want me to use the blue/green that appears in the logo.

So I thought that I could change the navbar to a blue gradient, but then the logo would either have to be white or moved outside of the navbar in order for it to stand-out.

I tried the logo in white, but it didn’t look very good. The only other solution I could think of was to take the gradient off the navbar like on this site.

What do you think the best solution would be?

Thanks,

Ross

[Author]

Posts