Nav menu ON the header image.

[manav]

Hi guys! I’m a noob trying to code my design portfolio + blog using Thesis theme framework. I’ve so far had success with putting header image (my logo) and the fonts (yea, that’s a big deal for me!). My logo has a spotlight behind it and it has quite a height so the nav menu appears below it. But according to my design, it should overlap the spotlight. Is there anyway I can do it?

[AntonNiklasson]

I don’t know how you wrote your markup, but I’m guessing it would be something like this:

Link


Link


Link

Or maybe without the div, and ul id=”navigation”.

However, you could write the CSS like this:

#navigation {

position: relative;

top: 1px; left: 1px;

}

Reload the page and open Firebug or something similar, like Inspect Element in Chrome. Decrease the top value to fit your needs, and left as well if needed.

Copy the new values and put them in your style.css. That should do it.

[manav]

@virtual @AntonNiklasson Here’s the link: http://test.manavdhiman.com

[AntonNiklasson]

I would export the shine white stuff behind the logo as a separate image and use that as the body background. Center it and snap it to the top like this:

background: url(path-to-shiny-image) top center no-repeat;

Then put the blue circle logo in the header, and the whole header won’t be as tall, allowing the navigation to appear further up.

[Author]

Posts