ThemeShaper Forums » Thematic

[closed]

menu over image in header

(8 posts)
  • Started 4 years ago by r0ger
  • Latest reply from jrobben
  • This topic is resolved

Tags:

  1. r0ger
    Member

    Hello

    I'm having a hard time adjusting the heigth of my header (or the position of the menu) I've got an 940x180 image I want to use in the header in such a way that the menu overlaps the bottom of the image. By setting the height of #acces to 0 I can move the background color up to the level of the image, but I can't find the way to move the menu up also. Checkout http://reuver/net/joost to see what i mean.

    Help would be much appreciated.

    Posted 4 years ago #
  2. r0ger
    Member

    Fixed it by putting the image in the #header background instead of the #branding background and adjusting the padding in #branding.

    #branding {
    text-indent:-9000px;
    padding:10px 0 98px 0;
    }

    #header {
    background:url(images/header.jpg) no-repeat scroll center top;
    background-color:#90c820;}

    Posted 4 years ago #
  3. Has anyone else found out how to do this? I tried this method and it doesn't work for me.

    Posted 4 years ago #
  4. I've almost got it... I just need to figure my flush left alignment issue...

    http://www.abigailtaylor.ca/design

    #header {
    background:url(images/header.jpg) no-repeat top center;
    display:block;

    width: 480px;
    height: 275px;
    }

    #blog-title a {
    display:block;
    text-indent:-9000px;
    width: 367px;
    height: 233px;
    }

    Posted 4 years ago #
  5. Abby,
    I am not sure what is not working, your menu does overlap your logo image. If you are having a problem applying a background color to the header, your header width is only 480px instead of 960. you are also using the main thematic theme. You should be using a child theme.

    Posted 4 years ago #
  6. Thanks, jrobben. My issue was with the left positioning of the header. The menu and header no longer aligns with the main content as it did before.

    I transferred to a child theme, though I still have this issue.

    Here is my revised code:
    #header {
    background:url(../thematic/images/header.jpg) no-repeat top center;
    width: 480px;
    height: 375px;
    }

    #blog-title a {
    display:block;
    text-indent:-9000px;
    width: 367px;
    height: 102px;
    }

    website: http://www.abigailtaylor.ca/design/

    Any help you can offer would be much appreciated!

    Thanks!

    Posted 4 years ago #
  7. It seems adding an image to the header tag itself is creating a lot of issues.

    Is there any way of having the menu overlap the header image by using another tag?

    Posted 4 years ago #
  8. it seems you have made some changes since your last post. But this seems to work.

    #blog-title a {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(../thematic/images/header.jpg) no-repeat scroll left bottom;
    display:block;
    height:288px;
    margin-bottom:-75px;
    width:500px;

    This is what I used to add 2 divisions to my header area

    <?php  //Adding to the header section behind the branding section - good right align logo
    function inserticon() {  //if page loads too slow change image file to billboard-RSS-150-single-2.png
    ?>
    <div id="headericon"> 
    
    </div>
    
    <div id="rss-image">
    <a href="http://feeds.feedburner.com/RAndROn-lineBusinessServices" target="_blank"><img class="rss-link" type="application/rss+xml" title="Get Our Articles by RSS" src="http://www.we-relax.com/web-elements/billboard-RSS-150-2.gif" alt="subscribe to RSS Feeds" border="none" /></a>
    
    </div>
    
    <?php
    }
    add_filter('thematic_header', 'inserticon',0);
    ?>
    Posted 4 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.