Make a stripe in header go across the length of the page

Hello .
I'm attempting to finish customizing a script I purchased from studiopress.com (the going green theme) and one of  the things in my initial vision was to have the brown stripe do 2 things 1) go across the top regardless of screen size and 2) fall behind the nav but above the center page background.  I've attached a screenshot of what i'd like it to look like.    

The goal
Unfortunately, I've been able to customize pretty much everything else except for these two Items.  I'm not a complete novice at css, but enough to be asking for help as this project is overdue.   Any detailed help you can offer is greatly appreciated!!

Here's the site in progress:  http://wedding.circleofsisters.com  

Thanks again!
vflearyAsked:
Who is Participating?
 
jeremyjared74Connect With a Mentor Commented:
You could add a div outside of the wrapper class in the header.php file. Add something like this to your header.php file just after the closing </head> tag:
<div id="top-bar">
        <div class="wrap">
             YOUR CODE IS HERE
                     index.php
                             sidebar.php
                                 footer.php
        </div> <-- this ends the wrap div --->
      </div> <------- add this div as the last div in the footer.php -------->


Now you just style the css for the new div. Maybe something like this:

#top-bar {
      background-color: #300;
      width: 100%;
      position: absolute;
      padding: 0;
      height: 200px;
      top: 25px;
        overflow: hidden;
        left: 0;
        right: 0;
}
0
 
DangerousJeffConnect With a Mentor Commented:
Hi, I really like your proposed design.
I'm not really a CSS guru either but one potential (hacky?) way of doing the full width stripe is this:
- Create another div containing the whole "wrap" div
- Give it an id, eg "stripe"
- In its CSS assign its background to be a vertical slice of your logo image repeating on the x axis and aligned at the top.

#stripe {
    background: url("images/logo-slice.png") repeat-x scroll center top transparent;
}

Open in new window


You can probably move your Nav to within the title area div, but your text-indent property will cause issues there, failing that potentially using absolute positioning.

Do you only have control over the CSS?
0
 
vflearyAuthor Commented:
Thanks to both... normally this would be super easy but because studiopress uses the Genesis Framework, finding where just outside the </head> tag is so I can edit it and add the additional div styel has become quite the adventure.  

If you have any clues, please fill me in.  Otherwise, stay tuned!
0
 
Jason C. LevineNo oneCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.