Moving a site description underneath a custom header (Bold Life)

imperviousrex · Member · Jul 18, 2012 at 3:24 pm
Copy link

Add topic to favorites
Is it possible via CSS to move a site description underneath a customer header?

Please see here: modernborefare.com

I would like to take the quote and move it below the custom header.

Thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 19, 2012 at 5:44 am
Copy link
Add the following to your custom CSS at the bottom.
```
h3.description {
position: absolute;
top: 360px;
}
```
Make sure and check when logged in and logged out. I am pretty sure that it will stay in place where it is, but once in a while it will not.
imperviousrex · Member · Jul 19, 2012 at 12:57 pm
Copy link
Thanks thesacredpath. Is this your theme? You seem to be answering the majority of Bold Life theme questions.

It turns out that while the CSS snippet you provided did move the site description underneath the header, the description now kind of sits on a portion of the image. Is there a way then to move the header image up and the dscription down, essentially swapping where they appear on the top of the page?
thesacredpath · Member · Jul 19, 2012 at 6:21 pm
Copy link
You can adjust the “top” value to move the site description up and down.

I just noticed that I forgot to include some code which made room below the header for the description. And yes the header image can be moved up.

Right now the description is not visible on your site so I can’t work with it.

And no, it isn’t my theme.
imperviousrex · Member · Jul 19, 2012 at 7:20 pm
Copy link
Ok, the description is now back.
thesacredpath · Member · Jul 19, 2012 at 11:28 pm
Copy link
Sorry for missing the other rule. Add these to the bottom of your CSS and see how it works for you.
```
#header-image {
margin-bottom: 90px;
}

.description {
position: absolute;
top: 360px;
}
```
thesacredpath · Member · Jul 19, 2012 at 11:29 pm
Copy link
Oops I forgot a code tag. Copy and paste the below instead.
```
#header-image {
margin-bottom: 90px;
}

.description {
position: absolute;
top: 360px;
}
```
imperviousrex · Member · Jul 19, 2012 at 11:31 pm
Copy link
That’s tremendous! Exactly what I was looking for. Thanks for taking the time to help me out.
thesacredpath · Member · Jul 20, 2012 at 12:20 am
Copy link
You are welcome.

No items found.